ordering-ui-react-native 0.14.31 → 0.14.34
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 +1 -1
- package/src/components/LogoutButton/index.tsx +14 -0
- package/src/components/ProductForm/index.tsx +41 -2
- package/src/components/ProductForm/styles.tsx +1 -1
- package/themes/doordash/src/components/ProductForm/index.tsx +41 -2
- package/themes/doordash/src/components/ProductForm/styles.tsx +1 -1
- package/themes/instacart/src/components/ProductForm/index.tsx +40 -1
- package/themes/instacart/src/components/ProductForm/styles.tsx +1 -1
- package/themes/original/src/components/Checkout/styles.tsx +1 -0
- package/themes/original/src/components/LoginForm/index.tsx +50 -49
- package/themes/original/src/components/PaymentOptionWallet/index.tsx +4 -4
- package/themes/original/src/components/PaymentOptionWallet/styles.tsx +1 -0
- package/themes/original/src/components/ProductForm/index.tsx +52 -15
- package/themes/original/src/components/ProductForm/styles.tsx +1 -1
- package/themes/uber-eats/src/components/ProductForm/index.tsx +43 -2
package/package.json
CHANGED
|
@@ -5,6 +5,7 @@ import { _retrieveStoreData, _clearStoreData } from '../../providers/StoreUtil';
|
|
|
5
5
|
|
|
6
6
|
import { OIcon, OText } from '../shared';
|
|
7
7
|
import { useTheme } from 'styled-components/native';
|
|
8
|
+
import { GoogleSignin } from '@react-native-google-signin/google-signin';
|
|
8
9
|
|
|
9
10
|
const LogoutButtonUI = (props: any) => {
|
|
10
11
|
const { handleLogoutClick, formState } = props
|
|
@@ -19,6 +20,19 @@ const LogoutButtonUI = (props: any) => {
|
|
|
19
20
|
if (res) {
|
|
20
21
|
_clearStoreData({ excludedKeys: ['isTutorial'] })
|
|
21
22
|
}
|
|
23
|
+
logoutWithGoogle()
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
const logoutWithGoogle = async () => {
|
|
27
|
+
const isSignedIn = await GoogleSignin.isSignedIn()
|
|
28
|
+
if (isSignedIn) {
|
|
29
|
+
try {
|
|
30
|
+
await GoogleSignin.revokeAccess();
|
|
31
|
+
await GoogleSignin.signOut();
|
|
32
|
+
} catch (error: any) {
|
|
33
|
+
showToast(ToastType.Error, error.message)
|
|
34
|
+
}
|
|
35
|
+
}
|
|
22
36
|
}
|
|
23
37
|
|
|
24
38
|
useEffect(() => {
|
|
@@ -27,7 +27,7 @@ import {
|
|
|
27
27
|
ProductComment,
|
|
28
28
|
ProductActions
|
|
29
29
|
} from './styles'
|
|
30
|
-
import { OButton, OInput, OText } from '../shared'
|
|
30
|
+
import { OButton, OIcon, OInput, OText } from '../shared'
|
|
31
31
|
import { ProductOptionSubOption } from '../ProductOptionSubOption'
|
|
32
32
|
import { NotFoundSource } from '../NotFoundSource'
|
|
33
33
|
import { Placeholder,PlaceholderLine,Fade } from 'rn-placeholder'
|
|
@@ -58,7 +58,7 @@ export const ProductOptionsUI = (props: any) => {
|
|
|
58
58
|
|
|
59
59
|
const theme = useTheme();
|
|
60
60
|
|
|
61
|
-
const [{ parsePrice }] = useUtils()
|
|
61
|
+
const [{ optimizeImage, parsePrice }] = useUtils()
|
|
62
62
|
const [, t] = useLanguage()
|
|
63
63
|
const [orderState] = useOrder()
|
|
64
64
|
const [{ auth }] = useSession()
|
|
@@ -165,6 +165,31 @@ export const ProductOptionsUI = (props: any) => {
|
|
|
165
165
|
<ProductDescription>
|
|
166
166
|
<OText>{product?.description || productCart?.description}</OText>
|
|
167
167
|
</ProductDescription>
|
|
168
|
+
<ScrollView
|
|
169
|
+
horizontal
|
|
170
|
+
showsHorizontalScrollIndicator={false}
|
|
171
|
+
contentContainerStyle={{ paddingBottom: 20 }}
|
|
172
|
+
>
|
|
173
|
+
{product?.tags?.map((tag: any) => (
|
|
174
|
+
<View
|
|
175
|
+
key={tag.id}
|
|
176
|
+
style={styles.productTagWrapper}
|
|
177
|
+
>
|
|
178
|
+
{tag?.image ? (
|
|
179
|
+
<OIcon
|
|
180
|
+
url={optimizeImage(tag?.image, 'h_40,c_limit')}
|
|
181
|
+
style={styles.productTagImageStyle}
|
|
182
|
+
/>
|
|
183
|
+
) : (
|
|
184
|
+
<OIcon
|
|
185
|
+
src={theme.images?.dummies?.product}
|
|
186
|
+
style={styles.productTagImageStyle}
|
|
187
|
+
/>
|
|
188
|
+
)}
|
|
189
|
+
<OText size={14} style={styles.productTagNameStyle}>{tag.name}</OText>
|
|
190
|
+
</View>
|
|
191
|
+
))}
|
|
192
|
+
</ScrollView>
|
|
168
193
|
{loading && !product ? (
|
|
169
194
|
<>
|
|
170
195
|
{[...Array(2)].map((item, i) => (
|
|
@@ -391,6 +416,20 @@ const styles = StyleSheet.create({
|
|
|
391
416
|
},
|
|
392
417
|
caloriesStyle: {
|
|
393
418
|
color: '#808080'
|
|
419
|
+
},
|
|
420
|
+
productTagWrapper: {
|
|
421
|
+
flexDirection: 'row',
|
|
422
|
+
alignItems: 'center'
|
|
423
|
+
},
|
|
424
|
+
productTagImageStyle: {
|
|
425
|
+
width: 32,
|
|
426
|
+
height: 32,
|
|
427
|
+
borderRadius: 8,
|
|
428
|
+
resizeMode: 'cover'
|
|
429
|
+
},
|
|
430
|
+
productTagNameStyle: {
|
|
431
|
+
paddingHorizontal: 6,
|
|
432
|
+
marginRight: 5
|
|
394
433
|
}
|
|
395
434
|
})
|
|
396
435
|
|
|
@@ -100,9 +100,23 @@ export const ProductOptionsUI = (props: any) => {
|
|
|
100
100
|
zIndex: 0
|
|
101
101
|
},
|
|
102
102
|
closeButton: { width: 11, height: 32, backgroundColor: theme.colors.white, alignItems: 'center', justifyContent: 'center' },
|
|
103
|
-
quantityWrap: { width: 40, height: 24, alignItems: 'center', justifyContent: 'center', borderRadius: 7.6, backgroundColor: theme.colors.inputDisabled }
|
|
103
|
+
quantityWrap: { width: 40, height: 24, alignItems: 'center', justifyContent: 'center', borderRadius: 7.6, backgroundColor: theme.colors.inputDisabled },
|
|
104
|
+
productTagWrapper: {
|
|
105
|
+
flexDirection: 'row',
|
|
106
|
+
alignItems: 'center'
|
|
107
|
+
},
|
|
108
|
+
productTagImageStyle: {
|
|
109
|
+
width: 32,
|
|
110
|
+
height: 32,
|
|
111
|
+
borderRadius: 8,
|
|
112
|
+
resizeMode: 'cover'
|
|
113
|
+
},
|
|
114
|
+
productTagNameStyle: {
|
|
115
|
+
paddingHorizontal: 6,
|
|
116
|
+
marginRight: 5
|
|
117
|
+
}
|
|
104
118
|
})
|
|
105
|
-
const [{ parsePrice }] = useUtils()
|
|
119
|
+
const [{ optimizeImage, parsePrice }] = useUtils()
|
|
106
120
|
const [, t] = useLanguage()
|
|
107
121
|
const [orderState] = useOrder()
|
|
108
122
|
const [{ auth }] = useSession()
|
|
@@ -215,6 +229,31 @@ export const ProductOptionsUI = (props: any) => {
|
|
|
215
229
|
<OText color={theme.colors.textSecondary}>{product?.description || productCart?.description}</OText>
|
|
216
230
|
</ProductDescription>
|
|
217
231
|
)}
|
|
232
|
+
<ScrollView
|
|
233
|
+
horizontal
|
|
234
|
+
showsHorizontalScrollIndicator={false}
|
|
235
|
+
contentContainerStyle={{ paddingBottom: 20 }}
|
|
236
|
+
>
|
|
237
|
+
{product?.tags?.map((tag: any) => (
|
|
238
|
+
<View
|
|
239
|
+
key={tag.id}
|
|
240
|
+
style={styles.productTagWrapper}
|
|
241
|
+
>
|
|
242
|
+
{tag?.image ? (
|
|
243
|
+
<OIcon
|
|
244
|
+
url={optimizeImage(tag?.image, 'h_40,c_limit')}
|
|
245
|
+
style={styles.productTagImageStyle}
|
|
246
|
+
/>
|
|
247
|
+
) : (
|
|
248
|
+
<OIcon
|
|
249
|
+
src={theme.images?.dummies?.product}
|
|
250
|
+
style={styles.productTagImageStyle}
|
|
251
|
+
/>
|
|
252
|
+
)}
|
|
253
|
+
<OText color={theme.colors.textSecondary} style={styles.productTagNameStyle}>{tag.name}</OText>
|
|
254
|
+
</View>
|
|
255
|
+
))}
|
|
256
|
+
</ScrollView>
|
|
218
257
|
{loading && !product ? (
|
|
219
258
|
<>
|
|
220
259
|
{[...Array(2)].map((item, i) => (
|
|
@@ -59,7 +59,7 @@ export const ProductOptionsUI = (props: any) => {
|
|
|
59
59
|
|
|
60
60
|
const theme = useTheme();
|
|
61
61
|
|
|
62
|
-
const [{ parsePrice }] = useUtils()
|
|
62
|
+
const [{ optimizeImage, parsePrice }] = useUtils()
|
|
63
63
|
const [, t] = useLanguage()
|
|
64
64
|
const [orderState] = useOrder()
|
|
65
65
|
const [{ auth }] = useSession()
|
|
@@ -162,6 +162,31 @@ export const ProductOptionsUI = (props: any) => {
|
|
|
162
162
|
<OText mBottom={7} style={{ ...theme.labels.small }} color={theme.colors.textSecondary}>{product?.description?.trim() || productCart?.description?.trim()}</OText>
|
|
163
163
|
</ProductDescription>
|
|
164
164
|
)}
|
|
165
|
+
<ScrollView
|
|
166
|
+
horizontal
|
|
167
|
+
showsHorizontalScrollIndicator={false}
|
|
168
|
+
contentContainerStyle={{ paddingBottom: 20 }}
|
|
169
|
+
>
|
|
170
|
+
{product?.tags?.map((tag: any) => (
|
|
171
|
+
<View
|
|
172
|
+
key={tag.id}
|
|
173
|
+
style={styles.productTagWrapper}
|
|
174
|
+
>
|
|
175
|
+
{tag?.image ? (
|
|
176
|
+
<OIcon
|
|
177
|
+
url={optimizeImage(tag?.image, 'h_40,c_limit')}
|
|
178
|
+
style={styles.productTagImageStyle}
|
|
179
|
+
/>
|
|
180
|
+
) : (
|
|
181
|
+
<OIcon
|
|
182
|
+
src={theme.images?.dummies?.product}
|
|
183
|
+
style={styles.productTagImageStyle}
|
|
184
|
+
/>
|
|
185
|
+
)}
|
|
186
|
+
<OText color={theme.colors.textSecondary} style={{ ...styles.productTagNameStyle, ...theme.labels.small}}>{tag.name}</OText>
|
|
187
|
+
</View>
|
|
188
|
+
))}
|
|
189
|
+
</ScrollView>
|
|
165
190
|
<View style={{ height: 16, backgroundColor: theme.colors.secundary, marginHorizontal: -40, marginBottom: 20 }} />
|
|
166
191
|
{loading && !product ? (
|
|
167
192
|
<>
|
|
@@ -392,6 +417,20 @@ const styles = StyleSheet.create({
|
|
|
392
417
|
paddingStart: 4,
|
|
393
418
|
paddingEnd: 4,
|
|
394
419
|
borderWidth: 1
|
|
420
|
+
},
|
|
421
|
+
productTagWrapper: {
|
|
422
|
+
flexDirection: 'row',
|
|
423
|
+
alignItems: 'center'
|
|
424
|
+
},
|
|
425
|
+
productTagImageStyle: {
|
|
426
|
+
width: 32,
|
|
427
|
+
height: 32,
|
|
428
|
+
borderRadius: 8,
|
|
429
|
+
resizeMode: 'cover'
|
|
430
|
+
},
|
|
431
|
+
productTagNameStyle: {
|
|
432
|
+
paddingHorizontal: 6,
|
|
433
|
+
marginRight: 5
|
|
395
434
|
}
|
|
396
435
|
})
|
|
397
436
|
|
|
@@ -436,59 +436,60 @@ const LoginFormUI = (props: LoginParams) => {
|
|
|
436
436
|
</>
|
|
437
437
|
)}
|
|
438
438
|
|
|
439
|
-
<View
|
|
440
|
-
style={{
|
|
441
|
-
flexDirection: 'row',
|
|
442
|
-
width: '100%',
|
|
443
|
-
justifyContent: 'space-between',
|
|
444
|
-
alignItems: 'center',
|
|
445
|
-
marginVertical: 15
|
|
446
|
-
}}>
|
|
447
|
-
<View style={loginStyle.line} />
|
|
448
|
-
<OText
|
|
449
|
-
size={14}
|
|
450
|
-
mBottom={10}
|
|
451
|
-
style={{ paddingHorizontal: 19 }}
|
|
452
|
-
color={theme.colors.disabled}>
|
|
453
|
-
{t('OR', 'or')}
|
|
454
|
-
</OText>
|
|
455
|
-
<View style={loginStyle.line} />
|
|
456
|
-
</View>
|
|
457
|
-
|
|
458
439
|
{configs && Object.keys(configs).length > 0 ? (
|
|
459
440
|
(((configs?.facebook_login?.value === 'true' || configs?.facebook_login?.value === '1') && configs?.facebook_id?.value) ||
|
|
460
441
|
(configs?.google_login_client_id?.value !== '' && configs?.google_login_client_id?.value !== null)) &&
|
|
461
442
|
(
|
|
462
|
-
|
|
463
|
-
|
|
464
|
-
|
|
465
|
-
|
|
466
|
-
|
|
467
|
-
|
|
468
|
-
|
|
469
|
-
|
|
470
|
-
|
|
471
|
-
|
|
472
|
-
|
|
473
|
-
|
|
474
|
-
|
|
475
|
-
|
|
476
|
-
|
|
477
|
-
|
|
478
|
-
|
|
479
|
-
|
|
480
|
-
|
|
481
|
-
|
|
482
|
-
|
|
483
|
-
|
|
484
|
-
|
|
485
|
-
|
|
486
|
-
|
|
487
|
-
|
|
488
|
-
|
|
489
|
-
|
|
490
|
-
|
|
491
|
-
|
|
443
|
+
<>
|
|
444
|
+
<View
|
|
445
|
+
style={{
|
|
446
|
+
flexDirection: 'row',
|
|
447
|
+
width: '100%',
|
|
448
|
+
justifyContent: 'space-between',
|
|
449
|
+
alignItems: 'center',
|
|
450
|
+
marginVertical: 15
|
|
451
|
+
}}>
|
|
452
|
+
<View style={loginStyle.line} />
|
|
453
|
+
<OText
|
|
454
|
+
size={14}
|
|
455
|
+
mBottom={10}
|
|
456
|
+
style={{ paddingHorizontal: 19 }}
|
|
457
|
+
color={theme.colors.disabled}>
|
|
458
|
+
{t('OR', 'or')}
|
|
459
|
+
</OText>
|
|
460
|
+
<View style={loginStyle.line} />
|
|
461
|
+
</View>
|
|
462
|
+
<ButtonsWrapper>
|
|
463
|
+
<SocialButtons>
|
|
464
|
+
{(configs?.facebook_login?.value === 'true' || configs?.facebook_login?.value === '1') &&
|
|
465
|
+
configs?.facebook_id?.value && (
|
|
466
|
+
<FacebookLogin
|
|
467
|
+
notificationState={notificationState}
|
|
468
|
+
handleErrors={(err: any) => showToast(ToastType.Error, err)}
|
|
469
|
+
handleLoading={(val: boolean) => setIsFBLoading(val)}
|
|
470
|
+
handleSuccessFacebookLogin={handleSuccessFacebook}
|
|
471
|
+
/>
|
|
472
|
+
)}
|
|
473
|
+
{(configs?.google_login_client_id?.value !== '' && configs?.google_login_client_id?.value !== null) && (
|
|
474
|
+
<GoogleLogin
|
|
475
|
+
notificationState={notificationState}
|
|
476
|
+
webClientId={configs?.google_login_client_id?.value}
|
|
477
|
+
handleErrors={(err: any) => showToast(ToastType.Error, err)}
|
|
478
|
+
handleLoading={(val: boolean) => setIsFBLoading(val)}
|
|
479
|
+
handleSuccessGoogleLogin={handleSuccessFacebook}
|
|
480
|
+
/>
|
|
481
|
+
)}
|
|
482
|
+
{(configs?.apple_login_client_id?.value !== '' && configs?.google_login_client_id?.value !== null) && (
|
|
483
|
+
<AppleLogin
|
|
484
|
+
notificationState={notificationState}
|
|
485
|
+
handleErrors={(err: any) => showToast(ToastType.Error, err)}
|
|
486
|
+
handleLoading={(val: boolean) => setIsFBLoading(val)}
|
|
487
|
+
handleSuccessAppleLogin={handleSuccessFacebook}
|
|
488
|
+
/>
|
|
489
|
+
)}
|
|
490
|
+
</SocialButtons>
|
|
491
|
+
</ButtonsWrapper>
|
|
492
|
+
</>
|
|
492
493
|
)
|
|
493
494
|
) : (
|
|
494
495
|
<SkeletonWrapper>
|
|
@@ -65,9 +65,9 @@ const PaymentOptionWalletUI = (props: any) => {
|
|
|
65
65
|
};
|
|
66
66
|
|
|
67
67
|
useEffect(() => {
|
|
68
|
-
if (!walletsState.loading) {
|
|
68
|
+
if (!walletsState.loading && walletsState.result?.length) {
|
|
69
69
|
setCheckedState(
|
|
70
|
-
walletsState.result
|
|
70
|
+
walletsState.result?.map((wallet: any) => {
|
|
71
71
|
return !!cart?.wallets?.find((w: any) => w.id === wallet.id)
|
|
72
72
|
})
|
|
73
73
|
)
|
|
@@ -101,7 +101,7 @@ const PaymentOptionWalletUI = (props: any) => {
|
|
|
101
101
|
onTintColor={theme.colors.primary}
|
|
102
102
|
style={Platform.OS === 'ios' && styles.checkBoxStyle}
|
|
103
103
|
/>
|
|
104
|
-
<View style={{ alignItems: 'baseline' }}>
|
|
104
|
+
<View style={{ alignItems: 'baseline', marginLeft: 5 }}>
|
|
105
105
|
<View>
|
|
106
106
|
<OText
|
|
107
107
|
style={((cart?.balance === 0 && !checkedState[idx]) || wallet.balance === 0) ?{
|
|
@@ -114,7 +114,7 @@ const PaymentOptionWalletUI = (props: any) => {
|
|
|
114
114
|
</View>
|
|
115
115
|
</SectionLeft>
|
|
116
116
|
|
|
117
|
-
<View style={{maxWidth: '
|
|
117
|
+
<View style={{maxWidth: '35%', alignItems: 'flex-end' }}>
|
|
118
118
|
{wallet.type === 'cash' && (
|
|
119
119
|
<OText>
|
|
120
120
|
{parsePrice(wallet?.balance)}
|
|
@@ -135,6 +135,20 @@ export const ProductOptionsUI = (props: any) => {
|
|
|
135
135
|
},
|
|
136
136
|
unitItem: {
|
|
137
137
|
fontSize: 12
|
|
138
|
+
},
|
|
139
|
+
productTagWrapper: {
|
|
140
|
+
flexDirection: 'row',
|
|
141
|
+
alignItems: 'center'
|
|
142
|
+
},
|
|
143
|
+
productTagImageStyle: {
|
|
144
|
+
width: 32,
|
|
145
|
+
height: 32,
|
|
146
|
+
borderRadius: 8,
|
|
147
|
+
resizeMode: 'cover'
|
|
148
|
+
},
|
|
149
|
+
productTagNameStyle: {
|
|
150
|
+
paddingHorizontal: 6,
|
|
151
|
+
marginRight: 5
|
|
138
152
|
}
|
|
139
153
|
});
|
|
140
154
|
|
|
@@ -423,17 +437,6 @@ export const ProductOptionsUI = (props: any) => {
|
|
|
423
437
|
</OText>
|
|
424
438
|
)}
|
|
425
439
|
</View>
|
|
426
|
-
<View style={{ flexDirection: 'row', marginBottom: 10 }}>
|
|
427
|
-
<OText size={16} style={{ flex: I18nManager.isRTL ? 1 : 0 }} color={theme.colors.primary}>{productCart.price ? parsePrice(productCart.price) : ''}</OText>
|
|
428
|
-
{product?.offer_price && (
|
|
429
|
-
<OText style={{ fontSize: 14,
|
|
430
|
-
color: '#808080',
|
|
431
|
-
textDecorationLine: 'line-through',
|
|
432
|
-
marginLeft: 7,
|
|
433
|
-
marginRight: 7
|
|
434
|
-
}}>{parsePrice(product?.offer_price)}</OText>
|
|
435
|
-
)}
|
|
436
|
-
</View>
|
|
437
440
|
{((product?.sku && product?.sku !== '-1' && product?.sku !== '1') || (product?.estimated_person)) && (
|
|
438
441
|
<OText size={14} style={{ flex: I18nManager.isRTL ? 1 : 0 }} color={'#909BA9'} mBottom={7}>
|
|
439
442
|
{
|
|
@@ -449,11 +452,20 @@ export const ProductOptionsUI = (props: any) => {
|
|
|
449
452
|
</OText>
|
|
450
453
|
)}
|
|
451
454
|
{isHaveWeight ? (
|
|
452
|
-
<OText size={16} lineHeight={24} color={theme.colors.
|
|
455
|
+
<OText size={16} lineHeight={24} color={theme.colors.primary}>{parsePrice(pricePerWeightUnit)} / {product?.weight_unit}</OText>
|
|
453
456
|
) : (
|
|
454
|
-
<
|
|
455
|
-
{productCart.price ? parsePrice(productCart.price) : ''}
|
|
456
|
-
|
|
457
|
+
<View style={{ flexDirection: 'row', marginBottom: 10 }}>
|
|
458
|
+
<OText size={16} style={{ flex: I18nManager.isRTL ? 1 : 0 }} color={theme.colors.primary}>{productCart.price ? parsePrice(productCart.price) : ''}</OText>
|
|
459
|
+
{product?.offer_price && (
|
|
460
|
+
<OText style={{
|
|
461
|
+
fontSize: 14,
|
|
462
|
+
color: '#808080',
|
|
463
|
+
textDecorationLine: 'line-through',
|
|
464
|
+
marginLeft: 7,
|
|
465
|
+
marginRight: 7
|
|
466
|
+
}}>{parsePrice(product?.offer_price)}</OText>
|
|
467
|
+
)}
|
|
468
|
+
</View>
|
|
457
469
|
)}
|
|
458
470
|
</>
|
|
459
471
|
)}
|
|
@@ -463,6 +475,31 @@ export const ProductOptionsUI = (props: any) => {
|
|
|
463
475
|
{product?.description || productCart?.description}
|
|
464
476
|
</OText>
|
|
465
477
|
</ProductDescription>
|
|
478
|
+
<ScrollView
|
|
479
|
+
horizontal
|
|
480
|
+
showsHorizontalScrollIndicator={false}
|
|
481
|
+
contentContainerStyle={{ paddingBottom: 30 }}
|
|
482
|
+
>
|
|
483
|
+
{product?.tags?.map((tag: any) => (
|
|
484
|
+
<View
|
|
485
|
+
key={tag.id}
|
|
486
|
+
style={styles.productTagWrapper}
|
|
487
|
+
>
|
|
488
|
+
{tag?.image ? (
|
|
489
|
+
<OIcon
|
|
490
|
+
url={optimizeImage(tag?.image, 'h_40,c_limit')}
|
|
491
|
+
style={styles.productTagImageStyle}
|
|
492
|
+
/>
|
|
493
|
+
) : (
|
|
494
|
+
<OIcon
|
|
495
|
+
src={theme.images?.dummies?.product}
|
|
496
|
+
style={styles.productTagImageStyle}
|
|
497
|
+
/>
|
|
498
|
+
)}
|
|
499
|
+
<OText color={theme.colors.textSecondary} size={12} style={styles.productTagNameStyle}>{tag.name}</OText>
|
|
500
|
+
</View>
|
|
501
|
+
))}
|
|
502
|
+
</ScrollView>
|
|
466
503
|
{loading && !product ? (
|
|
467
504
|
<>
|
|
468
505
|
{[...Array(2)].map((item, i) => (
|
|
@@ -29,7 +29,7 @@ import {
|
|
|
29
29
|
WrapperArrowIcon
|
|
30
30
|
|
|
31
31
|
} from './styles'
|
|
32
|
-
import { OButton, OInput, OText } from '../shared'
|
|
32
|
+
import { OButton, OInput, OText, OIcon } from '../shared'
|
|
33
33
|
import { ProductOptionSubOption } from '../ProductOptionSubOption'
|
|
34
34
|
import { NotFoundSource } from '../NotFoundSource'
|
|
35
35
|
import { Placeholder, PlaceholderLine, Fade } from 'rn-placeholder'
|
|
@@ -119,10 +119,24 @@ export const ProductOptionsUI = (props: any) => {
|
|
|
119
119
|
backgroundColor: theme.colors.lightGray,
|
|
120
120
|
padding: 2,
|
|
121
121
|
borderRadius: 20
|
|
122
|
+
},
|
|
123
|
+
productTagWrapper: {
|
|
124
|
+
flexDirection: 'row',
|
|
125
|
+
alignItems: 'center'
|
|
126
|
+
},
|
|
127
|
+
productTagImageStyle: {
|
|
128
|
+
width: 32,
|
|
129
|
+
height: 32,
|
|
130
|
+
borderRadius: 8,
|
|
131
|
+
resizeMode: 'cover'
|
|
132
|
+
},
|
|
133
|
+
productTagNameStyle: {
|
|
134
|
+
paddingHorizontal: 6,
|
|
135
|
+
marginRight: 5
|
|
122
136
|
}
|
|
123
137
|
})
|
|
124
138
|
|
|
125
|
-
const [{ parsePrice }] = useUtils()
|
|
139
|
+
const [{ optimizeImage, parsePrice }] = useUtils()
|
|
126
140
|
const [, t] = useLanguage()
|
|
127
141
|
const [orderState] = useOrder()
|
|
128
142
|
const [{ auth }] = useSession()
|
|
@@ -242,6 +256,33 @@ export const ProductOptionsUI = (props: any) => {
|
|
|
242
256
|
<OText color={theme.colors.gray} style={{ textAlign: 'left', marginBottom: 10 }}>{product?.description || productCart?.description}</OText>
|
|
243
257
|
</ProductDescription>
|
|
244
258
|
)}
|
|
259
|
+
<View style={{ marginHorizontal: 30 }}>
|
|
260
|
+
<ScrollView
|
|
261
|
+
horizontal
|
|
262
|
+
showsHorizontalScrollIndicator={false}
|
|
263
|
+
contentContainerStyle={{ paddingBottom: 20 }}
|
|
264
|
+
>
|
|
265
|
+
{product?.tags?.map((tag: any) => (
|
|
266
|
+
<View
|
|
267
|
+
key={tag.id}
|
|
268
|
+
style={styles.productTagWrapper}
|
|
269
|
+
>
|
|
270
|
+
{tag?.image ? (
|
|
271
|
+
<OIcon
|
|
272
|
+
url={optimizeImage(tag?.image, 'h_40,c_limit')}
|
|
273
|
+
style={styles.productTagImageStyle}
|
|
274
|
+
/>
|
|
275
|
+
) : (
|
|
276
|
+
<OIcon
|
|
277
|
+
src={theme.images?.dummies?.product}
|
|
278
|
+
style={styles.productTagImageStyle}
|
|
279
|
+
/>
|
|
280
|
+
)}
|
|
281
|
+
<OText size={14} style={styles.productTagNameStyle}>{tag.name}</OText>
|
|
282
|
+
</View>
|
|
283
|
+
))}
|
|
284
|
+
</ScrollView>
|
|
285
|
+
</View>
|
|
245
286
|
{loading && !product ? (
|
|
246
287
|
<>
|
|
247
288
|
{[...Array(2)].map((item, i) => (
|