ordering-ui-react-native 0.15.7 → 0.15.9-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.
- package/package.json +5 -3
- package/src/DeliveryApp.tsx +43 -1
- package/src/components/BusinessTypeFilter/index.tsx +12 -2
- package/src/components/BusinessTypeFilter/styles.tsx +1 -1
- package/src/components/BusinessesListing/index.tsx +1 -1
- package/src/components/Checkout/index.tsx +0 -1
- package/src/components/Home/index.tsx +3 -5
- package/src/components/LanguageSelector/index.tsx +66 -97
- package/src/components/LanguageSelector/styles.tsx +4 -17
- package/src/components/Messages/index.tsx +38 -30
- package/src/components/MomentOption/index.tsx +3 -1
- package/src/components/OrderDetails/index.tsx +25 -4
- package/src/components/PaymentOptions/index.tsx +9 -16
- package/src/components/PaymentOptionsWebView/index.tsx +123 -124
- package/src/components/ProductForm/index.tsx +1 -1
- package/src/components/ProductForm/styles.tsx +1 -0
- package/src/components/StripeElementsForm/index.tsx +27 -48
- package/src/components/UserProfileForm/index.tsx +35 -1
- package/src/components/VerifyPhone/styles.tsx +1 -2
- package/src/config.json +0 -2
- package/src/pages/Checkout.tsx +1 -1
- package/src/types/index.tsx +2 -9
- package/src/utils/index.tsx +2 -1
- package/themes/business/index.tsx +2 -0
- package/themes/business/src/components/Chat/index.tsx +32 -31
- package/themes/business/src/components/Home/index.tsx +128 -55
- package/themes/business/src/components/Home/styles.tsx +8 -1
- package/themes/business/src/components/NewOrderNotification/index.tsx +59 -98
- package/themes/business/src/components/OrderDetails/Business.tsx +1 -0
- package/themes/business/src/components/OrderDetails/OrderContentComponent.tsx +27 -0
- package/themes/business/src/components/OrderDetails/OrderHeaderComponent.tsx +85 -17
- package/themes/business/src/components/OrdersListManager/index.tsx +874 -0
- package/themes/business/src/components/OrdersListManager/styles.tsx +123 -0
- package/themes/business/src/components/OrdersListManager/utils.tsx +216 -0
- package/themes/business/src/components/OrdersOption/index.tsx +70 -116
- package/themes/business/src/components/OrdersOption/styles.tsx +2 -5
- package/themes/business/src/components/PreviousOrders/index.tsx +82 -23
- package/themes/doordash/src/components/BusinessesListing/index.tsx +1 -1
- package/themes/doordash/src/components/LoginForm/index.tsx +1 -2
- package/themes/instacart/src/components/BusinessesListing/index.tsx +1 -1
- package/themes/kiosk/src/components/BusinessController/index.tsx +27 -6
- package/themes/kiosk/src/components/BusinessController/styles.tsx +1 -1
- package/themes/kiosk/src/components/BusinessProductsListing/index.tsx +51 -24
- package/themes/kiosk/src/components/Cart/index.tsx +1 -1
- package/themes/kiosk/src/components/CartBottomSheet/index.tsx +1 -1
- package/themes/kiosk/src/components/CartBottomSheet/styles.tsx +1 -1
- package/themes/kiosk/src/components/CartContent/index.tsx +13 -3
- package/themes/kiosk/src/components/CartItem/index.tsx +20 -8
- package/themes/kiosk/src/components/CategoriesMenu/index.tsx +7 -5
- package/themes/kiosk/src/components/CustomerName/index.tsx +89 -88
- package/themes/kiosk/src/components/Intro/index.tsx +13 -13
- package/themes/kiosk/src/components/LanguageSelector/index.tsx +12 -8
- package/themes/kiosk/src/components/NavBar/index.tsx +14 -14
- package/themes/kiosk/src/components/OptionCard/index.tsx +1 -1
- package/themes/kiosk/src/components/OrderDetails/index.tsx +2 -2
- package/themes/kiosk/src/components/OrderSummary/index.tsx +1 -1
- package/themes/kiosk/src/components/OrderTypeCardSelector/index.tsx +10 -12
- package/themes/kiosk/src/components/ProductForm/index.tsx +174 -126
- package/themes/kiosk/src/components/ProductForm/styles.tsx +1 -1
- package/themes/kiosk/src/components/ProductOption/index.tsx +1 -0
- package/themes/kiosk/src/components/ProductOption/styles.tsx +1 -0
- package/themes/kiosk/src/components/UpsellingProducts/index.tsx +48 -34
- package/themes/kiosk/src/components/shared/OButton.tsx +5 -18
- package/themes/kiosk/src/components/shared/OCard.tsx +112 -78
- package/themes/original/index.tsx +177 -0
- package/themes/original/src/components/AddressForm/index.tsx +15 -10
- package/themes/original/src/components/AddressList/index.tsx +28 -2
- package/themes/original/src/components/AppleLogin/index.tsx +119 -78
- package/themes/original/src/components/BusinessBasicInformation/index.tsx +95 -44
- package/themes/original/src/components/BusinessBasicInformation/styles.tsx +28 -1
- package/themes/original/src/components/BusinessController/index.tsx +32 -21
- package/themes/original/src/components/BusinessListingSearch/index.tsx +7 -3
- package/themes/original/src/components/BusinessMenuList/index.tsx +11 -4
- package/themes/original/src/components/BusinessPreorder/index.tsx +141 -121
- package/themes/original/src/components/BusinessProductsCategories/index.tsx +7 -5
- package/themes/original/src/components/BusinessProductsList/index.tsx +129 -22
- package/themes/original/src/components/BusinessProductsList/styles.tsx +32 -2
- package/themes/original/src/components/BusinessProductsListing/index.tsx +18 -28
- package/themes/original/src/components/BusinessReviews/index.tsx +4 -25
- package/themes/original/src/components/BusinessesListing/index.tsx +40 -53
- package/themes/original/src/components/Cart/index.tsx +40 -9
- package/themes/original/src/components/CartContent/index.tsx +2 -2
- package/themes/original/src/components/Checkout/index.tsx +47 -31
- package/themes/original/src/components/Checkout/styles.tsx +7 -0
- package/themes/original/src/components/CouponControl/index.tsx +1 -0
- package/themes/original/src/components/DriverTips/index.tsx +1 -1
- package/themes/original/src/components/ForgotPasswordForm/index.tsx +8 -12
- package/themes/original/src/components/HighestRatedBusinesses/index.tsx +97 -89
- package/themes/original/src/components/Home/index.tsx +1 -1
- package/themes/original/src/components/LoginForm/index.tsx +156 -70
- package/themes/original/src/components/LoginForm/styles.tsx +6 -1
- package/themes/original/src/components/Messages/index.tsx +52 -45
- package/themes/original/src/components/Messages/styles.tsx +1 -3
- package/themes/original/src/components/MomentOption/index.tsx +10 -1
- package/themes/original/src/components/MomentOption/styles.tsx +1 -1
- package/themes/original/src/components/OrderDetails/index.tsx +104 -126
- package/themes/original/src/components/OrderDetails/styles.tsx +3 -1
- package/themes/original/src/components/OrderProgress/index.tsx +4 -4
- package/themes/original/src/components/OrderProgress/styles.tsx +1 -0
- package/themes/original/src/components/OrderSummary/index.tsx +34 -1
- package/themes/original/src/components/OrdersOption/index.tsx +15 -46
- package/themes/original/src/components/OrdersOption/styles.tsx +0 -6
- package/themes/original/src/components/PaymentOptionWallet/index.tsx +6 -2
- package/themes/original/src/components/PaymentOptions/index.tsx +24 -25
- package/themes/original/src/components/PhoneInputNumber/index.tsx +15 -8
- package/themes/original/src/components/PlaceSpot/index.tsx +114 -0
- package/themes/original/src/components/PlaceSpot/styles.tsx +11 -0
- package/themes/original/src/components/PreviousOrders/index.tsx +19 -13
- package/themes/original/src/components/ProductForm/index.tsx +31 -20
- package/themes/original/src/components/ProductForm/styles.tsx +2 -2
- package/themes/original/src/components/ReviewOrder/index.tsx +10 -9
- package/themes/original/src/components/ReviewProducts/index.tsx +1 -1
- package/themes/original/src/components/SignupForm/index.tsx +173 -154
- package/themes/original/src/components/StripeElementsForm/index.tsx +55 -72
- package/themes/original/src/components/TaxInformation/index.tsx +17 -7
- package/themes/original/src/components/UpsellingProducts/index.tsx +6 -6
- package/themes/original/src/components/UserDetails/index.tsx +4 -95
- package/themes/original/src/components/UserFormDetails/index.tsx +2 -14
- package/themes/original/src/components/UserProfile/index.tsx +16 -16
- package/themes/original/src/components/UserProfileForm/index.tsx +8 -6
- package/themes/original/src/components/VerifyPhone/index.tsx +10 -7
- package/themes/original/src/components/VerifyPhone/styles.tsx +2 -1
- package/themes/original/src/components/shared/HeaderTitle.tsx +21 -0
- package/themes/original/src/components/shared/index.tsx +2 -0
- package/themes/original/src/config/constants.tsx +6 -6
- package/themes/original/src/types/index.tsx +63 -23
- package/themes/original/src/utils/index.tsx +12 -2
- package/themes/single-business/src/components/AddressList/index.tsx +1 -1
- package/themes/single-business/src/components/OrderTypeSelector/index.tsx +5 -5
- package/themes/single-business/src/components/UserProfile/index.tsx +1 -1
- package/themes/uber-eats/src/components/BusinessesListing/index.tsx +1 -1
- package/src/components/StripeMethodForm/index.tsx +0 -168
|
@@ -46,7 +46,6 @@ import { ProductOptionSubOption } from '../ProductOptionSubOption';
|
|
|
46
46
|
import { NotFoundSource } from '../NotFoundSource';
|
|
47
47
|
import { Placeholder, PlaceholderLine, Fade } from 'rn-placeholder';
|
|
48
48
|
import { useState } from 'react';
|
|
49
|
-
|
|
50
49
|
const windowHeight = Dimensions.get('window').height;
|
|
51
50
|
const windowWidth = Dimensions.get('window').width;
|
|
52
51
|
|
|
@@ -291,15 +290,23 @@ export const ProductOptionsUI = (props: any) => {
|
|
|
291
290
|
if (img?.video) {
|
|
292
291
|
const keys = img?.video.split('/')
|
|
293
292
|
let _videoId = keys[keys.length - 1]
|
|
293
|
+
|
|
294
294
|
if (_videoId.includes('watch')) {
|
|
295
|
-
|
|
296
|
-
|
|
295
|
+
const __url = _videoId.split('=')[1]
|
|
296
|
+
_videoId = __url
|
|
297
|
+
} else if (_videoId.includes('?')) {
|
|
298
|
+
const __url = _videoId.split('?')[0]
|
|
299
|
+
_videoId = __url
|
|
300
|
+
}
|
|
301
|
+
|
|
302
|
+
if (_videoId.search(/&/i) >= 0) {
|
|
303
|
+
_videoId = _videoId.split('&')[0]
|
|
304
|
+
} else if (_videoId.search(/\?/i) >= 0) {
|
|
305
|
+
_videoId = _videoId.split('?')[0]
|
|
297
306
|
}
|
|
298
|
-
if (_videoId.
|
|
299
|
-
|
|
300
|
-
_videoId = __url
|
|
307
|
+
if ((_videoId.length === 11)) {
|
|
308
|
+
videoList.push(_videoId)
|
|
301
309
|
}
|
|
302
|
-
videoList.push(_videoId)
|
|
303
310
|
}
|
|
304
311
|
}
|
|
305
312
|
}
|
|
@@ -338,9 +345,9 @@ export const ProductOptionsUI = (props: any) => {
|
|
|
338
345
|
</OText>
|
|
339
346
|
</TouchableOpacity>
|
|
340
347
|
)}
|
|
341
|
-
{options.map(({ id, name, respect_to }: any) => (
|
|
348
|
+
{options.map(({ id, name, respect_to, suboptions }: any) => (
|
|
342
349
|
<React.Fragment key={`cont_key_${id}`}>
|
|
343
|
-
{respect_to == null && (
|
|
350
|
+
{respect_to == null && suboptions?.length > 0 && (
|
|
344
351
|
<TouchableOpacity
|
|
345
352
|
key={`eopt_key_${id}`}
|
|
346
353
|
onPress={() => setSelectedOpt(id)}
|
|
@@ -687,8 +694,8 @@ export const ProductOptionsUI = (props: any) => {
|
|
|
687
694
|
</WrapperIngredients>
|
|
688
695
|
</View>
|
|
689
696
|
)}
|
|
690
|
-
{product?.extras.map((extra: any) =>
|
|
691
|
-
extra.options.map((option: any) => {
|
|
697
|
+
{product?.extras.sort((a: any, b: any) => a.rank - b.rank).map((extra: any) =>
|
|
698
|
+
extra.options.sort((a: any, b: any) => a.rank - b.rank).map((option: any) => {
|
|
692
699
|
const currentState =
|
|
693
700
|
productCart.options[`id:${option.id}`] || {};
|
|
694
701
|
return (
|
|
@@ -704,7 +711,7 @@ export const ProductOptionsUI = (props: any) => {
|
|
|
704
711
|
backgroundColor: isError(option.id),
|
|
705
712
|
borderRadius: 7.6
|
|
706
713
|
}}>
|
|
707
|
-
{option.suboptions.map(
|
|
714
|
+
{option.suboptions.sort((a: any, b: any) => a.rank - b.rank).map(
|
|
708
715
|
(suboption: any) => {
|
|
709
716
|
const currentState =
|
|
710
717
|
productCart.options[
|
|
@@ -772,7 +779,7 @@ export const ProductOptionsUI = (props: any) => {
|
|
|
772
779
|
) : (
|
|
773
780
|
<>
|
|
774
781
|
{product?.extras.map((extra: any) =>
|
|
775
|
-
extra.options.map((option: any) => {
|
|
782
|
+
extra.options.sort((a: any, b: any) => a.rank - b.rank).map((option: any) => {
|
|
776
783
|
if (
|
|
777
784
|
option.id == selOpt ||
|
|
778
785
|
(hasRespected(
|
|
@@ -797,7 +804,7 @@ export const ProductOptionsUI = (props: any) => {
|
|
|
797
804
|
option.id,
|
|
798
805
|
),
|
|
799
806
|
}}>
|
|
800
|
-
{option.suboptions.map(
|
|
807
|
+
{option.suboptions.sort((a: any, b: any) => a.rank - b.rank).map(
|
|
801
808
|
(suboption: any) => {
|
|
802
809
|
const currentState =
|
|
803
810
|
productCart.options[
|
|
@@ -872,9 +879,13 @@ export const ProductOptionsUI = (props: any) => {
|
|
|
872
879
|
</ScrollView>
|
|
873
880
|
{!loading && !error && product && (
|
|
874
881
|
<ProductActions ios={Platform?.OS === 'ios'}>
|
|
875
|
-
<
|
|
876
|
-
{
|
|
877
|
-
|
|
882
|
+
<View>
|
|
883
|
+
<OText size={16} lineHeight={24} weight={'600'}>
|
|
884
|
+
{productCart.total ? parsePrice(productCart?.total) : ''}
|
|
885
|
+
</OText>
|
|
886
|
+
{product?.minimum_per_order && productCart?.quantity < product?.minimum_per_order && <OText size={12} color={theme.colors?.red}>{t('MOBILE_MINIMUM_TO_ORDER', 'Min. _number_ ').replace('_number_', product?.minimum_per_order)}</OText>}
|
|
887
|
+
{product?.maximum_per_order && productCart?.quantity > product?.maximum_per_order && <OText size={12} color={theme.colors?.red}>{t('MOBILE_MAXIMUM_TO_ORDER', 'Max. _number_'.replace('_number_', product?.maximum_per_order))}</OText>}
|
|
888
|
+
</View>
|
|
878
889
|
{productCart && !isSoldOut && maxProductQuantity > 0 && (
|
|
879
890
|
<View style={styles.quantityControl}>
|
|
880
891
|
<TouchableOpacity
|
|
@@ -987,14 +998,14 @@ export const ProductOptionsUI = (props: any) => {
|
|
|
987
998
|
? t('UPDATE', 'Update')
|
|
988
999
|
: t('ADD', 'Add')
|
|
989
1000
|
}`}
|
|
990
|
-
isDisabled={isSoldOut || maxProductQuantity <= 0}
|
|
1001
|
+
isDisabled={isSoldOut || maxProductQuantity <= 0 || (product?.minimum_per_order && (productCart?.quantity < product?.minimum_per_order)) || (product?.maximum_per_order && (productCart?.quantity > product?.maximum_per_order))}
|
|
991
1002
|
textStyle={{
|
|
992
1003
|
color: saveErrors || isSoldOut || maxProductQuantity <= 0 ? theme.colors.primary : theme.colors.white,
|
|
993
1004
|
fontSize: orderState.loading || editMode ? 10 : 14
|
|
994
1005
|
}}
|
|
995
1006
|
style={{
|
|
996
|
-
backgroundColor: saveErrors || isSoldOut || maxProductQuantity <= 0 ? theme.colors.lightGray : theme.colors.primary,
|
|
997
|
-
borderColor: saveErrors || isSoldOut || maxProductQuantity <= 0 ? theme.colors.white : theme.colors.primary,
|
|
1007
|
+
backgroundColor: saveErrors || isSoldOut || maxProductQuantity <= 0 || (product?.minimum_per_order && (productCart?.quantity < product?.minimum_per_order)) || (product?.maximum_per_order && (productCart?.quantity > product?.maximum_per_order)) ? theme.colors.lightGray : theme.colors.primary,
|
|
1008
|
+
borderColor: saveErrors || isSoldOut || maxProductQuantity <= 0 || (product?.minimum_per_order && (productCart?.quantity < product?.minimum_per_order)) || (product?.maximum_per_order && (productCart?.quantity > product?.maximum_per_order)) ? theme.colors.white : theme.colors.primary,
|
|
998
1009
|
opacity: saveErrors || isSoldOut || maxProductQuantity <= 0 ? 0.3 : 1,
|
|
999
1010
|
borderRadius: 7.6,
|
|
1000
1011
|
height: 44,
|
|
@@ -6,9 +6,10 @@ export const WrapHeader = styled.View`
|
|
|
6
6
|
`
|
|
7
7
|
|
|
8
8
|
export const TopActions = styled.TouchableOpacity`
|
|
9
|
-
height:
|
|
9
|
+
height: 60px;
|
|
10
10
|
justify-content: center;
|
|
11
11
|
padding-horizontal: 30px;
|
|
12
|
+
width: 80px;
|
|
12
13
|
`;
|
|
13
14
|
|
|
14
15
|
export const TopHeader = styled.View`
|
|
@@ -48,7 +49,6 @@ export const ProductDescription = styled.View`
|
|
|
48
49
|
`
|
|
49
50
|
|
|
50
51
|
export const ProductEditions = styled.View`
|
|
51
|
-
|
|
52
52
|
`
|
|
53
53
|
|
|
54
54
|
export const SectionTitle = styled.View`
|
|
@@ -43,7 +43,7 @@ export const ReviewOrderUI = (props: ReviewOrderParams) => {
|
|
|
43
43
|
logoWrapper: {
|
|
44
44
|
shadowColor: theme.colors.black,
|
|
45
45
|
shadowRadius: 3,
|
|
46
|
-
shadowOffset: {width: 1, height: 4},
|
|
46
|
+
shadowOffset: { width: 1, height: 4 },
|
|
47
47
|
elevation: 3,
|
|
48
48
|
borderRadius: 8,
|
|
49
49
|
shadowOpacity: 0.1,
|
|
@@ -108,11 +108,11 @@ export const ReviewOrderUI = (props: ReviewOrderParams) => {
|
|
|
108
108
|
}
|
|
109
109
|
|
|
110
110
|
const qualificationList = [
|
|
111
|
-
{ key: 1, text: t('TERRIBLE', 'Terrible'), percent: 0,
|
|
111
|
+
{ key: 1, text: t('TERRIBLE', 'Terrible'), percent: 0, parentStyle: { left: '0%' }, isInnerStyle: false, pointerColor: false },
|
|
112
112
|
{ key: 2, text: t('BAD', 'Bad'), percent: 0.25, parentStyle: { left: '25%' }, isInnerStyle: true, pointerColor: true },
|
|
113
113
|
{ key: 3, text: t('OKAY', 'Okay'), percent: 0.5, parentStyle: { left: '50%' }, isInnerStyle: true, pointerColor: true },
|
|
114
114
|
{ key: 4, text: t('GOOD', 'Good'), percent: 0.75, parentStyle: { left: '75%' }, isInnerStyle: true, pointerColor: true },
|
|
115
|
-
{ key: 5, text: t('GREAT', 'Great'), percent: 1, parentStyle: { right: '0%' }, isInnerStyle: false,
|
|
115
|
+
{ key: 5, text: t('GREAT', 'Great'), percent: 1, parentStyle: { right: '0%' }, isInnerStyle: false, pointerColor: false }
|
|
116
116
|
]
|
|
117
117
|
|
|
118
118
|
const commentsList = reviewCommentList('order')
|
|
@@ -137,7 +137,7 @@ export const ReviewOrderUI = (props: ReviewOrderParams) => {
|
|
|
137
137
|
return found
|
|
138
138
|
}
|
|
139
139
|
|
|
140
|
-
const handleContinueClick
|
|
140
|
+
const handleContinueClick = () => {
|
|
141
141
|
if (!order?.review) {
|
|
142
142
|
onSubmit()
|
|
143
143
|
} else {
|
|
@@ -183,7 +183,7 @@ export const ReviewOrderUI = (props: ReviewOrderParams) => {
|
|
|
183
183
|
comments.map(comment => _comments += comment.content + '. ')
|
|
184
184
|
}
|
|
185
185
|
let _comment
|
|
186
|
-
_comment = _comments
|
|
186
|
+
_comment = _comments + extraComment
|
|
187
187
|
setStars({ ...stars, comments: _comment })
|
|
188
188
|
}, [comments, extraComment])
|
|
189
189
|
|
|
@@ -214,7 +214,7 @@ export const ReviewOrderUI = (props: ReviewOrderParams) => {
|
|
|
214
214
|
<OText color={theme.colors.primary}>{t('ORDER_REVIEWED', 'This order has been already reviewed')}</OText>
|
|
215
215
|
</View>
|
|
216
216
|
) : (
|
|
217
|
-
<View style={{flex: 1, justifyContent: 'flex-end'}}>
|
|
217
|
+
<View style={{ flex: 1, justifyContent: 'flex-end' }}>
|
|
218
218
|
<FormReviews>
|
|
219
219
|
<OText mBottom={13} color={theme.colors.textNormal}>{t('HOW_WAS_YOUR_ORDER', 'How was your order?')}</OText>
|
|
220
220
|
<RatingBarContainer>
|
|
@@ -266,7 +266,7 @@ export const ReviewOrderUI = (props: ReviewOrderParams) => {
|
|
|
266
266
|
style={{ height: 35, paddingLeft: 5, paddingRight: 5, marginHorizontal: 3, marginVertical: 10 }}
|
|
267
267
|
imgRightSrc={isSelectedComment(commentItem.key) ? theme.images.general.close : null}
|
|
268
268
|
imgRightStyle={{ tintColor: theme.colors.white, right: 5, margin: 5 }}
|
|
269
|
-
onClick={() => handleChangeComment(commentItem)
|
|
269
|
+
onClick={() => handleChangeComment(commentItem)}
|
|
270
270
|
/>
|
|
271
271
|
))}
|
|
272
272
|
</CommentsButtonGroup>
|
|
@@ -304,7 +304,7 @@ export const ReviewOrderUI = (props: ReviewOrderParams) => {
|
|
|
304
304
|
textStyle={{ color: theme.colors.white, paddingRight: 10 }}
|
|
305
305
|
text={t('CONTINUE', 'Continue')}
|
|
306
306
|
style={{ borderRadius: 8 }}
|
|
307
|
-
|
|
307
|
+
imgRightSrc={theme.images.general.arrow_right}
|
|
308
308
|
imgRightStyle={{ tintColor: theme.colors.white, right: 5, margin: 5 }}
|
|
309
309
|
onClick={handleSubmit(handleContinueClick)}
|
|
310
310
|
/>
|
|
@@ -317,7 +317,8 @@ export const ReviewOrderUI = (props: ReviewOrderParams) => {
|
|
|
317
317
|
export const ReviewOrder = (props: ReviewOrderParams) => {
|
|
318
318
|
const reviewOrderProps = {
|
|
319
319
|
...props,
|
|
320
|
-
UIComponent: ReviewOrderUI
|
|
320
|
+
UIComponent: ReviewOrderUI,
|
|
321
|
+
defaultStar: 5
|
|
321
322
|
}
|
|
322
323
|
return <ReviewOrderController {...reviewOrderProps} />
|
|
323
324
|
}
|
|
@@ -74,7 +74,7 @@ const ReviewProductsUI = (props: ReviewProductParams) => {
|
|
|
74
74
|
titleWrapStyle={{ paddingHorizontal: 0 }}
|
|
75
75
|
titleStyle={{ marginRight: 0, marginLeft: 0 }}
|
|
76
76
|
/>
|
|
77
|
-
{order?.products
|
|
77
|
+
{order?.products?.map((product: any) => (
|
|
78
78
|
<SingleProductReview
|
|
79
79
|
key={product.id}
|
|
80
80
|
product={product}
|
|
@@ -68,7 +68,6 @@ const SignupFormUI = (props: SignupParams) => {
|
|
|
68
68
|
|
|
69
69
|
const theme = useTheme();
|
|
70
70
|
|
|
71
|
-
|
|
72
71
|
const style = StyleSheet.create({
|
|
73
72
|
btnOutline: {
|
|
74
73
|
backgroundColor: '#FFF',
|
|
@@ -77,7 +76,6 @@ const SignupFormUI = (props: SignupParams) => {
|
|
|
77
76
|
inputStyle: {
|
|
78
77
|
marginBottom: 20,
|
|
79
78
|
borderWidth: 1,
|
|
80
|
-
borderColor: theme.colors.border,
|
|
81
79
|
borderRadius: 7.6,
|
|
82
80
|
},
|
|
83
81
|
wrappText: {
|
|
@@ -102,7 +100,7 @@ const SignupFormUI = (props: SignupParams) => {
|
|
|
102
100
|
const [, t] = useLanguage();
|
|
103
101
|
const [, { login }] = useSession();
|
|
104
102
|
const [{ configs }] = useConfig();
|
|
105
|
-
const { control, handleSubmit, errors } = useForm();
|
|
103
|
+
const { control, handleSubmit, errors, register, setValue } = useForm();
|
|
106
104
|
|
|
107
105
|
const [passwordSee, setPasswordSee] = useState(false);
|
|
108
106
|
const [formValues, setFormValues] = useState(null);
|
|
@@ -227,7 +225,7 @@ const SignupFormUI = (props: SignupParams) => {
|
|
|
227
225
|
handleButtonSignupClick &&
|
|
228
226
|
handleButtonSignupClick({
|
|
229
227
|
...values,
|
|
230
|
-
...phoneInputData.phone,
|
|
228
|
+
...((phoneInputData.phone.cellphone !== null && phoneInputData.phone.country_phone_code !== null) && {...phoneInputData.phone}),
|
|
231
229
|
});
|
|
232
230
|
if (
|
|
233
231
|
!formState.loading &&
|
|
@@ -298,36 +296,23 @@ const SignupFormUI = (props: SignupParams) => {
|
|
|
298
296
|
|
|
299
297
|
useEffect(() => {
|
|
300
298
|
if (Object.keys(errors).length > 0) {
|
|
301
|
-
// Convert all errors in one string to show in toast provider
|
|
302
|
-
const list = Object.values(errors);
|
|
303
|
-
if (phoneInputData.error) {
|
|
304
|
-
list.push({ message: phoneInputData.error });
|
|
305
|
-
}
|
|
306
|
-
if (
|
|
307
|
-
!phoneInputData.error &&
|
|
308
|
-
!phoneInputData.phone.country_phone_code &&
|
|
309
|
-
!phoneInputData.phone.cellphone &&
|
|
310
|
-
((validationFields?.fields?.checkout?.cellphone?.enabled &&
|
|
311
|
-
validationFields?.fields?.checkout?.cellphone?.required) ||
|
|
312
|
-
configs?.verification_phone_required?.value === '1')
|
|
313
|
-
) {
|
|
314
|
-
list.push({
|
|
315
|
-
message: t(
|
|
316
|
-
'VALIDATION_ERROR_MOBILE_PHONE_REQUIRED',
|
|
317
|
-
'The field Mobile phone is required.',
|
|
318
|
-
),
|
|
319
|
-
});
|
|
320
|
-
}
|
|
321
|
-
let stringError = '';
|
|
322
|
-
list.map((item: any, i: number) => {
|
|
323
|
-
stringError +=
|
|
324
|
-
i + 1 === list.length ? `- ${item.message}` : `- ${item.message}\n`;
|
|
325
|
-
});
|
|
326
|
-
showToast(ToastType.Error, stringError);
|
|
327
299
|
setIsLoadingVerifyModal(false);
|
|
328
300
|
}
|
|
329
301
|
}, [errors]);
|
|
330
302
|
|
|
303
|
+
useEffect(() => {
|
|
304
|
+
register('cellphone', {
|
|
305
|
+
required: isRequiredField('cellphone')
|
|
306
|
+
? t('VALIDATION_ERROR_MOBILE_PHONE_REQUIRED', 'The field Mobile phone is required').replace('_attribute_', t('CELLPHONE', 'Cellphone'))
|
|
307
|
+
: null
|
|
308
|
+
})
|
|
309
|
+
}, [register])
|
|
310
|
+
|
|
311
|
+
useEffect(() => {
|
|
312
|
+
if (phoneInputData?.phone?.cellphone) setValue('cellphone', phoneInputData?.phone?.cellphone, '')
|
|
313
|
+
else setValue('cellphone', '')
|
|
314
|
+
}, [phoneInputData?.phone?.cellphone])
|
|
315
|
+
|
|
331
316
|
useEffect(() => {
|
|
332
317
|
if (verifyPhoneState && !verifyPhoneState?.loading) {
|
|
333
318
|
if (verifyPhoneState.result?.error) {
|
|
@@ -412,48 +397,58 @@ const SignupFormUI = (props: SignupParams) => {
|
|
|
412
397
|
!notValidationFields.includes(field.code) &&
|
|
413
398
|
showField &&
|
|
414
399
|
showField(field.code) && (
|
|
415
|
-
<
|
|
416
|
-
|
|
417
|
-
|
|
418
|
-
|
|
419
|
-
|
|
420
|
-
|
|
421
|
-
|
|
422
|
-
|
|
423
|
-
field.code === 'email'
|
|
424
|
-
? theme.images.general.email
|
|
425
|
-
: theme.images.general.user
|
|
426
|
-
}
|
|
427
|
-
value={value}
|
|
428
|
-
onChange={(val: any) =>
|
|
429
|
-
field.code !== 'email'
|
|
430
|
-
? onChange(val)
|
|
431
|
-
: handleChangeInputEmail(val, onChange)
|
|
432
|
-
}
|
|
433
|
-
autoCapitalize={
|
|
434
|
-
field.code === 'email' ? 'none' : 'sentences'
|
|
435
|
-
}
|
|
436
|
-
autoCorrect={field.code === 'email' && false}
|
|
437
|
-
type={
|
|
438
|
-
field.code === 'email' ? 'email-address' : 'default'
|
|
439
|
-
}
|
|
440
|
-
autoCompleteType={
|
|
441
|
-
field.code === 'email' ? 'email' : 'off'
|
|
442
|
-
}
|
|
443
|
-
returnKeyType="next"
|
|
444
|
-
blurOnSubmit={false}
|
|
445
|
-
forwardRef={(ref: any) => handleRefs(ref, field.code)}
|
|
446
|
-
onSubmitEditing={() =>
|
|
447
|
-
field.code === 'email'
|
|
448
|
-
? phoneRef?.current?.focus?.()
|
|
449
|
-
: handleFocusRef(getNextFieldCode(i))
|
|
450
|
-
}
|
|
451
|
-
/>
|
|
400
|
+
<React.Fragment key={field.id}>
|
|
401
|
+
{errors?.[`${field.code}`] && (
|
|
402
|
+
<OText
|
|
403
|
+
size={14}
|
|
404
|
+
color={theme.colors.danger5}
|
|
405
|
+
weight={'normal'}>
|
|
406
|
+
{errors?.[`${field.code}`]?.message} {errors?.[`${field.code}`]?.type === 'required' && '*'}
|
|
407
|
+
</OText>
|
|
452
408
|
)}
|
|
453
|
-
|
|
454
|
-
|
|
455
|
-
|
|
456
|
-
|
|
409
|
+
<Controller
|
|
410
|
+
control={control}
|
|
411
|
+
render={({ onChange, value }: any) => (
|
|
412
|
+
<OInput
|
|
413
|
+
placeholder={t(field.name)}
|
|
414
|
+
style={style.inputStyle}
|
|
415
|
+
icon={
|
|
416
|
+
field.code === 'email'
|
|
417
|
+
? theme.images.general.email
|
|
418
|
+
: theme.images.general.user
|
|
419
|
+
}
|
|
420
|
+
value={value}
|
|
421
|
+
onChange={(val: any) =>
|
|
422
|
+
field.code !== 'email'
|
|
423
|
+
? onChange(val)
|
|
424
|
+
: handleChangeInputEmail(val, onChange)
|
|
425
|
+
}
|
|
426
|
+
autoCapitalize={
|
|
427
|
+
field.code === 'email' ? 'none' : 'sentences'
|
|
428
|
+
}
|
|
429
|
+
autoCorrect={field.code === 'email' && false}
|
|
430
|
+
type={
|
|
431
|
+
field.code === 'email' ? 'email-address' : 'default'
|
|
432
|
+
}
|
|
433
|
+
autoCompleteType={
|
|
434
|
+
field.code === 'email' ? 'email' : 'off'
|
|
435
|
+
}
|
|
436
|
+
returnKeyType="next"
|
|
437
|
+
blurOnSubmit={false}
|
|
438
|
+
forwardRef={(ref: any) => handleRefs(ref, field.code)}
|
|
439
|
+
onSubmitEditing={() =>
|
|
440
|
+
field.code === 'email'
|
|
441
|
+
? phoneRef?.current?.focus?.()
|
|
442
|
+
: handleFocusRef(getNextFieldCode(i))
|
|
443
|
+
}
|
|
444
|
+
borderColor={errors?.[`${field.code}`] ? theme.colors.danger5 : theme.colors.border}
|
|
445
|
+
/>
|
|
446
|
+
)}
|
|
447
|
+
name={field.code}
|
|
448
|
+
rules={getInputRules(field)}
|
|
449
|
+
defaultValue=""
|
|
450
|
+
/>
|
|
451
|
+
</React.Fragment>
|
|
457
452
|
),
|
|
458
453
|
)}
|
|
459
454
|
|
|
@@ -467,6 +462,7 @@ const SignupFormUI = (props: SignupParams) => {
|
|
|
467
462
|
returnKeyType: 'next',
|
|
468
463
|
onSubmitEditing: () => passwordRef?.current?.focus?.(),
|
|
469
464
|
}}
|
|
465
|
+
isStartValidation={errors?.cellphone}
|
|
470
466
|
/>
|
|
471
467
|
</View>
|
|
472
468
|
)}
|
|
@@ -499,99 +495,122 @@ const SignupFormUI = (props: SignupParams) => {
|
|
|
499
495
|
</View>
|
|
500
496
|
|
|
501
497
|
{configs?.terms_and_conditions?.value === 'true' && (
|
|
502
|
-
|
|
498
|
+
<>
|
|
499
|
+
{errors?.termsAccept && (
|
|
500
|
+
<OText
|
|
501
|
+
size={14}
|
|
502
|
+
color={theme.colors.danger5}
|
|
503
|
+
weight={'normal'}>
|
|
504
|
+
{errors?.termsAccept?.message}*
|
|
505
|
+
</OText>
|
|
506
|
+
)}
|
|
507
|
+
<View style={{ flexDirection: 'row', alignItems: 'center', marginBottom: 20 }}>
|
|
508
|
+
<Controller
|
|
509
|
+
control={control}
|
|
510
|
+
render={({ onChange, value }: any) => (
|
|
511
|
+
<CheckBox
|
|
512
|
+
value={value}
|
|
513
|
+
onValueChange={newValue => {
|
|
514
|
+
onChange(newValue)
|
|
515
|
+
}}
|
|
516
|
+
boxType={'square'}
|
|
517
|
+
tintColors={{
|
|
518
|
+
true: theme.colors.primary,
|
|
519
|
+
false: theme.colors.disabled
|
|
520
|
+
}}
|
|
521
|
+
tintColor={theme.colors.disabled}
|
|
522
|
+
onCheckColor={theme.colors.primary}
|
|
523
|
+
onTintColor={theme.colors.primary}
|
|
524
|
+
style={Platform.OS === 'ios' && style.checkBoxStyle}
|
|
525
|
+
/>
|
|
526
|
+
)}
|
|
527
|
+
name='termsAccept'
|
|
528
|
+
rules={{
|
|
529
|
+
required: t('VALIDATION_ERROR_ACCEPTED', 'The _attribute_ must be accepted.').replace('_attribute_', t('TERMS_AND_CONDITIONS', 'Terms & Conditions'))
|
|
530
|
+
}}
|
|
531
|
+
defaultValue={false}
|
|
532
|
+
/>
|
|
533
|
+
<OText style={{ fontSize: 14, paddingHorizontal: 5 }}>{t('TERMS_AND_CONDITIONS_TEXT', 'I agree with')}</OText>
|
|
534
|
+
<OButton
|
|
535
|
+
imgRightSrc={null}
|
|
536
|
+
text={t('TERMS_AND_CONDITIONS', 'Terms & Conditions')}
|
|
537
|
+
bgColor='#FFF'
|
|
538
|
+
borderColor='#FFF'
|
|
539
|
+
style={{ paddingLeft: 0, paddingRight: 0, height: 30, shadowColor: '#FFF' }}
|
|
540
|
+
textStyle={{ color: theme.colors.primary, marginLeft: 0, marginRight: 0 }}
|
|
541
|
+
onClick={() => handleOpenTermsUrl(configs?.terms_and_conditions_url?.value)}
|
|
542
|
+
/>
|
|
543
|
+
</View>
|
|
544
|
+
</>
|
|
545
|
+
|
|
546
|
+
)}
|
|
547
|
+
|
|
548
|
+
{signupTab !== 'cellphone' && (
|
|
549
|
+
<>
|
|
550
|
+
{errors?.password && (
|
|
551
|
+
<OText
|
|
552
|
+
size={14}
|
|
553
|
+
color={theme.colors.danger5}
|
|
554
|
+
weight={'normal'}>
|
|
555
|
+
{errors?.password?.message} {errors?.password?.type === 'required' && '*'}
|
|
556
|
+
</OText>
|
|
557
|
+
)}
|
|
503
558
|
<Controller
|
|
504
559
|
control={control}
|
|
505
560
|
render={({ onChange, value }: any) => (
|
|
506
|
-
<
|
|
561
|
+
<OInput
|
|
562
|
+
isSecured={!passwordSee ? true : false}
|
|
563
|
+
placeholder={t('PASSWORD', 'Password')}
|
|
564
|
+
style={style.inputStyle}
|
|
565
|
+
icon={theme.images.general.lock}
|
|
566
|
+
iconCustomRight={
|
|
567
|
+
!passwordSee ? (
|
|
568
|
+
<MaterialCommunityIcons
|
|
569
|
+
name="eye-outline"
|
|
570
|
+
color={theme.colors.disabled}
|
|
571
|
+
size={24}
|
|
572
|
+
onPress={() => setPasswordSee(!passwordSee)}
|
|
573
|
+
/>
|
|
574
|
+
) : (
|
|
575
|
+
<MaterialCommunityIcons
|
|
576
|
+
name="eye-off-outline"
|
|
577
|
+
color={theme.colors.disabled}
|
|
578
|
+
size={24}
|
|
579
|
+
onPress={() => setPasswordSee(!passwordSee)}
|
|
580
|
+
/>
|
|
581
|
+
)
|
|
582
|
+
}
|
|
507
583
|
value={value}
|
|
508
|
-
|
|
509
|
-
|
|
510
|
-
}
|
|
511
|
-
|
|
512
|
-
|
|
513
|
-
|
|
514
|
-
false: theme.colors.disabled
|
|
515
|
-
}}
|
|
516
|
-
tintColor={theme.colors.disabled}
|
|
517
|
-
onCheckColor={theme.colors.primary}
|
|
518
|
-
onTintColor={theme.colors.primary}
|
|
519
|
-
style={Platform.OS === 'ios' && style.checkBoxStyle}
|
|
584
|
+
onChange={(val: any) => onChange(val)}
|
|
585
|
+
returnKeyType="done"
|
|
586
|
+
onSubmitEditing={handleSubmit(onSubmit)}
|
|
587
|
+
blurOnSubmit
|
|
588
|
+
forwardRef={passwordRef}
|
|
589
|
+
borderColor={errors?.password ? theme.colors.danger5 : theme.colors.border}
|
|
520
590
|
/>
|
|
521
591
|
)}
|
|
522
|
-
name=
|
|
592
|
+
name="password"
|
|
523
593
|
rules={{
|
|
524
|
-
required:
|
|
594
|
+
required: isRequiredField('password')
|
|
595
|
+
? t(
|
|
596
|
+
'VALIDATION_ERROR_PASSWORD_REQUIRED',
|
|
597
|
+
'The field Password is required',
|
|
598
|
+
).replace('_attribute_', t('PASSWORD', 'password'))
|
|
599
|
+
: null,
|
|
600
|
+
minLength: {
|
|
601
|
+
value: 8,
|
|
602
|
+
message: t(
|
|
603
|
+
'VALIDATION_ERROR_PASSWORD_MIN_STRING',
|
|
604
|
+
'The Password must be at least 8 characters.',
|
|
605
|
+
)
|
|
606
|
+
.replace('_attribute_', t('PASSWORD', 'Password'))
|
|
607
|
+
.replace('_min_', 8),
|
|
608
|
+
},
|
|
525
609
|
}}
|
|
526
|
-
defaultValue=
|
|
527
|
-
/>
|
|
528
|
-
<OText style={{ fontSize: 14, paddingHorizontal: 5 }}>{t('TERMS_AND_CONDITIONS_TEXT', 'I agree with')}</OText>
|
|
529
|
-
<OButton
|
|
530
|
-
imgRightSrc={null}
|
|
531
|
-
text={t('TERMS_AND_CONDITIONS', 'Terms & Conditions')}
|
|
532
|
-
bgColor='#FFF'
|
|
533
|
-
borderColor='#FFF'
|
|
534
|
-
style={{ paddingLeft: 0, paddingRight: 0, height: 30, shadowColor: '#FFF' }}
|
|
535
|
-
textStyle={{ color: theme.colors.primary, marginLeft: 0, marginRight: 0 }}
|
|
536
|
-
onClick={() => handleOpenTermsUrl(configs?.terms_and_conditions_url?.value)}
|
|
610
|
+
defaultValue=""
|
|
537
611
|
/>
|
|
538
|
-
|
|
539
|
-
)}
|
|
612
|
+
</>
|
|
540
613
|
|
|
541
|
-
{signupTab !== 'cellphone' && (
|
|
542
|
-
<Controller
|
|
543
|
-
control={control}
|
|
544
|
-
render={({ onChange, value }: any) => (
|
|
545
|
-
<OInput
|
|
546
|
-
isSecured={!passwordSee ? true : false}
|
|
547
|
-
placeholder={t('PASSWORD', 'Password')}
|
|
548
|
-
style={style.inputStyle}
|
|
549
|
-
icon={theme.images.general.lock}
|
|
550
|
-
iconCustomRight={
|
|
551
|
-
!passwordSee ? (
|
|
552
|
-
<MaterialCommunityIcons
|
|
553
|
-
name="eye-outline"
|
|
554
|
-
color={theme.colors.disabled}
|
|
555
|
-
size={24}
|
|
556
|
-
onPress={() => setPasswordSee(!passwordSee)}
|
|
557
|
-
/>
|
|
558
|
-
) : (
|
|
559
|
-
<MaterialCommunityIcons
|
|
560
|
-
name="eye-off-outline"
|
|
561
|
-
color={theme.colors.disabled}
|
|
562
|
-
size={24}
|
|
563
|
-
onPress={() => setPasswordSee(!passwordSee)}
|
|
564
|
-
/>
|
|
565
|
-
)
|
|
566
|
-
}
|
|
567
|
-
value={value}
|
|
568
|
-
onChange={(val: any) => onChange(val)}
|
|
569
|
-
returnKeyType="done"
|
|
570
|
-
onSubmitEditing={handleSubmit(onSubmit)}
|
|
571
|
-
blurOnSubmit
|
|
572
|
-
forwardRef={passwordRef}
|
|
573
|
-
/>
|
|
574
|
-
)}
|
|
575
|
-
name="password"
|
|
576
|
-
rules={{
|
|
577
|
-
required: isRequiredField('password')
|
|
578
|
-
? t(
|
|
579
|
-
'VALIDATION_ERROR_PASSWORD_REQUIRED',
|
|
580
|
-
'The field Password is required',
|
|
581
|
-
).replace('_attribute_', t('PASSWORD', 'password'))
|
|
582
|
-
: null,
|
|
583
|
-
minLength: {
|
|
584
|
-
value: 8,
|
|
585
|
-
message: t(
|
|
586
|
-
'VALIDATION_ERROR_PASSWORD_MIN_STRING',
|
|
587
|
-
'The Password must be at least 8 characters.',
|
|
588
|
-
)
|
|
589
|
-
.replace('_attribute_', t('PASSWORD', 'Password'))
|
|
590
|
-
.replace('_min_', 8),
|
|
591
|
-
},
|
|
592
|
-
}}
|
|
593
|
-
defaultValue=""
|
|
594
|
-
/>
|
|
595
614
|
)}
|
|
596
615
|
</>
|
|
597
616
|
) : (
|