ordering-ui-react-native 0.16.25-release → 0.16.26-release

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 +18 -16
  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.16.25-release",
3
+ "version": "0.16.26-release",
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
@@ -485,22 +485,24 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
485
485
  )}
486
486
  </IOScrollView>
487
487
  {!loading && auth && currentCart?.products?.length > 0 && categoryState.products.length !== 0 && (
488
- <FloatingButton
489
- btnText={
490
- openUpselling
491
- ? t('LOADING', 'Loading')
492
- : currentCart?.subtotal >= currentCart?.minimum
493
- ? t('VIEW_ORDER', 'View Order')
494
- : `${t('MINIMUN_SUBTOTAL_ORDER', 'Minimum subtotal order:')} ${parsePrice(currentCart?.minimum)}`
495
- }
496
- isSecondaryBtn={currentCart?.subtotal < currentCart?.minimum || openUpselling}
497
- btnLeftValueShow={currentCart?.subtotal >= currentCart?.minimum && currentCart?.products?.length > 0}
498
- btnRightValueShow={currentCart?.subtotal >= currentCart?.minimum && currentCart?.products?.length > 0}
499
- btnLeftValue={currentCart?.products.reduce((prev: number, product: any) => prev + product.quantity, 0)}
500
- btnRightValue={parsePrice(currentCart?.total)}
501
- disabled={currentCart?.subtotal < currentCart?.minimum || openUpselling}
502
- handleClick={() => setOpenUpselling(true)}
503
- />
488
+ <View style={{ marginBottom: Platform.OS === 'ios' ? 20 : 0 }}>
489
+ <FloatingButton
490
+ btnText={
491
+ openUpselling
492
+ ? t('LOADING', 'Loading')
493
+ : currentCart?.subtotal >= currentCart?.minimum
494
+ ? t('VIEW_ORDER', 'View Order')
495
+ : `${t('MINIMUN_SUBTOTAL_ORDER', 'Minimum subtotal order:')} ${parsePrice(currentCart?.minimum)}`
496
+ }
497
+ isSecondaryBtn={currentCart?.subtotal < currentCart?.minimum || openUpselling}
498
+ btnLeftValueShow={currentCart?.subtotal >= currentCart?.minimum && currentCart?.products?.length > 0}
499
+ btnRightValueShow={currentCart?.subtotal >= currentCart?.minimum && currentCart?.products?.length > 0}
500
+ btnLeftValue={currentCart?.products.reduce((prev: number, product: any) => prev + product.quantity, 0)}
501
+ btnRightValue={parsePrice(currentCart?.total)}
502
+ disabled={currentCart?.subtotal < currentCart?.minimum || openUpselling}
503
+ handleClick={() => setOpenUpselling(true)}
504
+ />
505
+ </View>
504
506
  )}
505
507
  {openUpselling && (
506
508
  <UpsellingRedirect
package/themes/original/src/components/Checkout/index.tsx CHANGED
@@ -180,8 +180,8 @@ const CheckoutUI = (props: any) => {
180
180
  }
181
181
  }
182
182
 
183
- const handlePlaceOrder = (confirmPayment: any) => {
184
- if (!userErrors.length && !requiredFields?.length) {
183
+ const handlePlaceOrder = (confirmPayment: any, forcePlace: boolean = false) => {
184
+ if (!userErrors.length && !requiredFields?.length || forcePlace) {
185
185
  handlerClickPlaceOrder && handlerClickPlaceOrder(null, null, confirmPayment)
186
186
  return
187
187
  }
@@ -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
  }