ordering-ui-react-native 0.17.45 → 0.17.46

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/BusinessProductsListing/index.tsx +26 -24
  3. package/themes/original/src/components/Checkout/index.tsx +6 -3
  4. package/themes/original/src/components/LoginForm/Otp/index.tsx +95 -73
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "ordering-ui-react-native",
3
- "version": "0.17.45",
3
+ "version": "0.17.46",
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/BusinessProductsListing/index.tsx CHANGED
@@ -130,7 +130,7 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
130
130
  const [subcategoriesSelected, setSubcategoriesSelected] = useState([])
131
131
  const [openService, setOpenService] = useState(false)
132
132
  const [currentProduct, setCurrentProduct] = useState(null)
133
- const [searchBarHeight, setSearchBarHeight] = useState(60)
133
+ const [searchBarHeight, setSearchBarHeight] = useState(60)
134
134
 
135
135
  const isCheckoutMultiBusinessEnabled: Boolean = configs?.checkout_multi_business_enabled?.value === '1'
136
136
  const openCarts = (Object.values(orderState?.carts)?.filter((cart: any) => cart?.products && cart?.products?.length && cart?.status !== 2 && cart?.valid_schedule && cart?.valid_products && cart?.valid_address && cart?.valid_maximum && cart?.valid_minimum && !cart?.wallets) || null) || []
@@ -263,7 +263,7 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
263
263
  style={{
264
264
  marginTop: Platform.OS === 'ios' ? insets.top : 0
265
265
  }}
266
- onLayout={(event: any) => setSearchBarHeight(event.nativeEvent.layout.height) }
266
+ onLayout={(event: any) => setSearchBarHeight(event.nativeEvent.layout.height) }
267
267
  >
268
268
  {!isOpenSearchBar && (
269
269
  <>
@@ -324,12 +324,12 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
324
324
 
325
325
  {business?.categories?.length > 0 && isOpenFiltProducts && (
326
326
  <FiltProductsContainer
327
- style={{
328
- height: Dimensions.get('window').height - filtProductsHeight,
329
- top: Platform.OS === 'ios' ? searchBarHeight + insets.top : searchBarHeight
330
- }}
331
- contentContainerStyle={{ flexGrow: 1 }}
332
- >
327
+ style={{
328
+ height: Dimensions.get('window').height - filtProductsHeight,
329
+ top: Platform.OS === 'ios' ? searchBarHeight + insets.top : searchBarHeight
330
+ }}
331
+ contentContainerStyle={{ flexGrow: 1 }}
332
+ >
333
333
  <View style={{ padding: 20, backgroundColor: theme.colors.white }}>
334
334
  <BusinessProductsList
335
335
  categories={[
@@ -487,22 +487,24 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
487
487
  )}
488
488
  </IOScrollView>
489
489
  {!loading && auth && currentCart?.products?.length > 0 && categoryState.products.length !== 0 && (
490
- <FloatingButton
491
- btnText={
492
- openUpselling
493
- ? t('LOADING', 'Loading')
494
- : currentCart?.subtotal >= currentCart?.minimum
495
- ? t('VIEW_ORDER', 'View Order')
496
- : `${t('MINIMUN_SUBTOTAL_ORDER', 'Minimum subtotal order:')} ${parsePrice(currentCart?.minimum)}`
497
- }
498
- isSecondaryBtn={currentCart?.subtotal < currentCart?.minimum || openUpselling}
499
- btnLeftValueShow={currentCart?.subtotal >= currentCart?.minimum && currentCart?.products?.length > 0}
500
- btnRightValueShow={currentCart?.subtotal >= currentCart?.minimum && currentCart?.products?.length > 0}
501
- btnLeftValue={currentCart?.products.reduce((prev: number, product: any) => prev + product.quantity, 0)}
502
- btnRightValue={parsePrice(currentCart?.total)}
503
- disabled={currentCart?.subtotal < currentCart?.minimum || openUpselling}
504
- handleClick={() => setOpenUpselling(true)}
505
- />
490
+ <View style={{ marginBottom: Platform.OS === 'ios' ? 20 : 0 }}>
491
+ <FloatingButton
492
+ btnText={
493
+ openUpselling
494
+ ? t('LOADING', 'Loading')
495
+ : currentCart?.subtotal >= currentCart?.minimum
496
+ ? t('VIEW_ORDER', 'View Order')
497
+ : `${t('MINIMUN_SUBTOTAL_ORDER', 'Minimum subtotal order:')} ${parsePrice(currentCart?.minimum)}`
498
+ }
499
+ isSecondaryBtn={currentCart?.subtotal < currentCart?.minimum || openUpselling}
500
+ btnLeftValueShow={currentCart?.subtotal >= currentCart?.minimum && currentCart?.products?.length > 0}
501
+ btnRightValueShow={currentCart?.subtotal >= currentCart?.minimum && currentCart?.products?.length > 0}
502
+ btnLeftValue={currentCart?.products.reduce((prev: number, product: any) => prev + product.quantity, 0)}
503
+ btnRightValue={parsePrice(currentCart?.total)}
504
+ disabled={currentCart?.subtotal < currentCart?.minimum || openUpselling}
505
+ handleClick={() => setOpenUpselling(true)}
506
+ />
507
+ </View>
506
508
  )}
507
509
  {openUpselling && (
508
510
  <UpsellingRedirect
package/themes/original/src/components/Checkout/index.tsx CHANGED
@@ -182,8 +182,8 @@ const CheckoutUI = (props: any) => {
182
182
  }
183
183
  }
184
184
 
185
- const handlePlaceOrder = (confirmPayment: any) => {
186
- if (!userErrors.length && !requiredFields?.length) {
185
+ const handlePlaceOrder = (confirmPayment: any, forcePlace: boolean = false) => {
186
+ if (!userErrors.length && !requiredFields?.length || forcePlace) {
187
187
  handlerClickPlaceOrder && handlerClickPlaceOrder(null, null, confirmPayment)
188
188
  return
189
189
  }
@@ -742,7 +742,10 @@ const CheckoutUI = (props: any) => {
742
742
  togglePhoneUpdate={togglePhoneUpdate}
743
743
  requiredFields={requiredFields}
744
744
  hideUpdateButton
745
- onClose={() => setIsOpen(false)}
745
+ onClose={() => {
746
+ setIsOpen(false)
747
+ handlePlaceOrder(null, true)
748
+ }}
746
749
  />
747
750
  </View>
748
751
  </OModal>
package/themes/original/src/components/LoginForm/Otp/index.tsx CHANGED
@@ -1,91 +1,113 @@
1
- import React, { useEffect } from 'react'
1
+ import React, { useEffect, useState } from 'react'
2
2
  import { formatSeconds } from '../../../utils'
3
3
  import { StyleSheet, TouchableOpacity } from 'react-native';
4
4
  import { useCountdownTimer } from '../../../../../../src/hooks/useCountdownTimer';
5
5
  import { useLanguage } from 'ordering-components/native';
6
6
  import { OTPContainer } from './styles';
7
7
  import { OText, OButton } from '../../shared';
8
- import OTPInputView from '@twotalltotems/react-native-otp-input'
8
+ import OtpInputs from 'react-native-otp-inputs';
9
9
  import { useTheme } from 'styled-components/native';
10
10
  import { otpParams } from '../../../types'
11
11
 
12
12
  export const Otp = (props: otpParams) => {
13
- const {
14
- willVerifyOtpState,
15
- setWillVerifyOtpState,
16
- onSubmit,
17
- handleLoginOtp,
18
- setAlertState,
19
- pinCount
20
- } = props
13
+ const {
14
+ willVerifyOtpState,
15
+ setWillVerifyOtpState,
16
+ onSubmit,
17
+ handleLoginOtp,
18
+ setAlertState,
19
+ pinCount
20
+ } = props
21
21
 
22
- const theme = useTheme();
23
- const [, t] = useLanguage();
24
- const [otpLeftTime, _, resetOtpLeftTime]: any = useCountdownTimer(
25
- 600, willVerifyOtpState)
22
+ const theme = useTheme();
23
+ const [, t] = useLanguage();
24
+ const [otpLeftTime, _, resetOtpLeftTime]: any = useCountdownTimer(
25
+ 600, willVerifyOtpState)
26
26
 
27
+ const [code, setCode] = useState('')
27
28
 
28
- const handleOnSubmit = () => {
29
- setAlertState({
30
- open: true,
31
- title: t('CODE_SENT', 'The code has been sent'),
32
- })
33
- resetOtpLeftTime()
34
- onSubmit()
29
+
30
+ const handleOnSubmit = () => {
31
+ setAlertState({
32
+ open: true,
33
+ title: t('CODE_SENT', 'The code has been sent'),
34
+ })
35
+ resetOtpLeftTime()
36
+ onSubmit()
37
+ }
38
+
39
+ useEffect(() => {
40
+ if (otpLeftTime === 0) {
41
+ setAlertState({
42
+ open: true,
43
+ title: t('TIME_IS_UP', 'Time is up'),
44
+ content: t('PLEASE_RESEND_CODE', 'Please resend code again')
45
+ })
35
46
  }
47
+ }, [otpLeftTime])
36
48
 
37
- useEffect(() => {
38
- if (otpLeftTime === 0) {
39
- setAlertState({
40
- open: true,
41
- title: t('TIME_IS_UP', 'Time is up'),
42
- content: t('PLEASE_RESEND_CODE', 'Please resend code again')
43
- })
44
- }
45
- }, [otpLeftTime])
49
+ useEffect(() => {
50
+ if (code?.length === (pinCount || 6)) {
51
+ handleLoginOtp(code)
52
+ }
53
+ }, [code])
46
54
 
47
- const loginStyle = StyleSheet.create({
48
- underlineStyleBase: {
49
- width: 45,
50
- height: 60,
51
- borderWidth: 1,
52
- fontSize: 16
53
- },
54
- underlineStyleHighLighted: {
55
- borderColor: theme.colors.primary,
56
- color: theme.colors.primary,
57
- fontSize: 16
58
- },
59
- });
55
+ const loginStyle = StyleSheet.create({
56
+ container: {
57
+ width: '100%',
58
+ flexDirection: 'row',
59
+ justifyContent: 'space-between',
60
+ marginVertical: 30
61
+ },
62
+ focusStyles: {
63
+ borderColor: theme.colors.primary,
64
+ borderWidth: 1,
65
+ borderRadius: 8
66
+ },
67
+ underlineStyleBase: {
68
+ width: 45,
69
+ height: 50,
70
+ borderWidth: 1,
71
+ fontSize: 16,
72
+ borderRadius: 8,
73
+ borderColor: theme.colors.lightGray,
74
+ textAlign: 'center'
75
+ },
76
+ underlineStyleHighLighted: {
77
+ borderColor: theme.colors.primary,
78
+ color: theme.colors.primary,
79
+ fontSize: 16
80
+ },
81
+ });
60
82
 
61
- return (
62
- <>
63
- <OTPContainer>
64
- <OText size={24}>
65
- {formatSeconds(otpLeftTime)}
66
- </OText>
67
- <OTPInputView
68
- style={{ width: '100%', height: 150 }}
69
- pinCount={pinCount || 6}
70
- codeInputFieldStyle={loginStyle.underlineStyleBase}
71
- codeInputHighlightStyle={loginStyle.underlineStyleHighLighted}
72
- onCodeFilled={(code: string) => handleLoginOtp(code)}
73
- selectionColor={theme.colors.primary}
74
- />
75
- <TouchableOpacity onPress={() => handleOnSubmit()} disabled={otpLeftTime > 520}>
76
- <OText size={16} mBottom={30} color={otpLeftTime > 520 ? theme.colors.disabled : theme.colors.primary}>
77
- {t('RESEND_CODE', 'Resend code')}
78
- </OText>
79
- </TouchableOpacity>
80
- <OButton
81
- onClick={() => setWillVerifyOtpState(false)}
82
- bgColor={theme.colors.white}
83
- borderColor={theme.colors.primary}
84
- textStyle={{ color: theme.colors.primary }}
85
- style={{ borderRadius: 8, width: '100%' }}
86
- text={t('CANCEL', 'Cancel')}
87
- />
88
- </OTPContainer>
89
- </>
90
- )
83
+ return (
84
+ <>
85
+ <OTPContainer>
86
+ <OText size={24}>
87
+ {formatSeconds(otpLeftTime)}
88
+ </OText>
89
+ <OtpInputs
90
+ autofillFromClipboard
91
+ numberOfInputs={pinCount || 6}
92
+ style={loginStyle.container}
93
+ inputStyles={loginStyle.underlineStyleBase}
94
+ focusStyles={loginStyle.focusStyles}
95
+ handleChange={setCode}
96
+ />
97
+ <TouchableOpacity onPress={() => handleOnSubmit()} disabled={otpLeftTime > 520}>
98
+ <OText size={16} mBottom={30} color={otpLeftTime > 520 ? theme.colors.disabled : theme.colors.primary}>
99
+ {t('RESEND_CODE', 'Resend code')}
100
+ </OText>
101
+ </TouchableOpacity>
102
+ <OButton
103
+ onClick={() => setWillVerifyOtpState(false)}
104
+ bgColor={theme.colors.white}
105
+ borderColor={theme.colors.primary}
106
+ textStyle={{ color: theme.colors.primary }}
107
+ style={{ borderRadius: 8, width: '100%' }}
108
+ text={t('CANCEL', 'Cancel')}
109
+ />
110
+ </OTPContainer>
111
+ </>
112
+ )
91
113
  }