ordering-ui-react-native 0.14.32 → 0.14.35

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 (16) hide show
  1. package/package.json +1 -1
  2. package/src/components/LogoutButton/index.tsx +14 -0
  3. package/src/components/ProductForm/index.tsx +41 -2
  4. package/src/components/ProductForm/styles.tsx +1 -1
  5. package/themes/doordash/src/components/ProductForm/index.tsx +41 -2
  6. package/themes/doordash/src/components/ProductForm/styles.tsx +1 -1
  7. package/themes/instacart/src/components/ProductForm/index.tsx +40 -1
  8. package/themes/instacart/src/components/ProductForm/styles.tsx +1 -1
  9. package/themes/original/src/components/Checkout/styles.tsx +1 -0
  10. package/themes/original/src/components/FacebookLogin/index.tsx +20 -5
  11. package/themes/original/src/components/LoginForm/index.tsx +50 -49
  12. package/themes/original/src/components/PaymentOptionWallet/index.tsx +4 -4
  13. package/themes/original/src/components/PaymentOptionWallet/styles.tsx +1 -0
  14. package/themes/original/src/components/ProductForm/index.tsx +39 -0
  15. package/themes/original/src/components/ProductForm/styles.tsx +1 -1
  16. package/themes/uber-eats/src/components/ProductForm/index.tsx +43 -2
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "ordering-ui-react-native",
3
- "version": "0.14.32",
3
+ "version": "0.14.35",
4
4
  "description": "Reusable components made in react native",
5
5
  "main": "src/index.tsx",
6
6
  "author": "ordering.inc",
package/src/components/LogoutButton/index.tsx 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(() => {
package/src/components/ProductForm/index.tsx CHANGED
@@ -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
 
package/src/components/ProductForm/styles.tsx CHANGED
@@ -41,7 +41,7 @@ export const ProductTitle = styled.View`
41
41
  `
42
42
 
43
43
  export const ProductDescription = styled.View`
44
- margin-bottom: 30px;
44
+ margin-bottom: 20px;
45
45
  `
46
46
 
47
47
  export const ProductEditions = styled.View`
package/themes/doordash/src/components/ProductForm/index.tsx CHANGED
@@ -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) => (
package/themes/doordash/src/components/ProductForm/styles.tsx CHANGED
@@ -40,7 +40,7 @@ export const ProductTitle = styled.View`
40
40
 
41
41
  export const ProductDescription = styled.View`
42
42
  margin-top: 10px;
43
- margin-bottom: 30px;
43
+ margin-bottom: 20px;
44
44
  `
45
45
 
46
46
  export const ProductEditions = styled.View`
package/themes/instacart/src/components/ProductForm/index.tsx CHANGED
@@ -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
 
package/themes/instacart/src/components/ProductForm/styles.tsx CHANGED
@@ -38,7 +38,7 @@ export const ProductTitle = styled.View`
38
38
  `
39
39
 
40
40
  export const ProductDescription = styled.View`
41
- margin-bottom: 30px;
41
+ margin-bottom: 10px;
42
42
  `
43
43
 
44
44
  export const ProductEditions = styled.View`
package/themes/original/src/components/Checkout/styles.tsx CHANGED
@@ -76,6 +76,7 @@ export const ChCart = styled(ChPaymethods)``
76
76
 
77
77
  export const WalletPaymentOptionContainer = styled(ChPaymethods)`
78
78
  padding-bottom: 0;
79
+ margin-left: -20px;
79
80
  `
80
81
 
81
82
  export const ChPlaceOrderBtn = styled.View`
package/themes/original/src/components/FacebookLogin/index.tsx CHANGED
@@ -11,7 +11,8 @@ export const FacebookLogin = (props: any) => {
11
11
  const {
12
12
  handleErrors,
13
13
  handleLoading,
14
- handleSuccessFacebookLogin
14
+ handleSuccessFacebookLogin,
15
+ notificationState
15
16
  } = props
16
17
 
17
18
  const [, t] = useLanguage()
@@ -30,7 +31,14 @@ export const FacebookLogin = (props: any) => {
30
31
 
31
32
  const handleLoginClick = async (accessToken: string) => {
32
33
  try {
33
- const response = await ordering.users().authFacebook({ access_token: accessToken })
34
+ const body: any = {
35
+ access_token: accessToken
36
+ }
37
+ if (notificationState?.notification_token) {
38
+ body.notification_token = notificationState.notification_token
39
+ body.notification_app = notificationState.notification_app
40
+ }
41
+ const response = await ordering.users().authFacebook(body)
34
42
  if (!response.content.error) {
35
43
  if (handleSuccessFacebookLogin) {
36
44
  handleSuccessFacebookLogin(response.content.result)
@@ -38,9 +46,10 @@ export const FacebookLogin = (props: any) => {
38
46
  }
39
47
  } else {
40
48
  handleLoading && handleLoading(false)
49
+ handleErrors && handleErrors(response.content.result)
41
50
  logoutWithFacebook()
42
51
  }
43
- } catch (err) {
52
+ } catch (err: any) {
44
53
  handleLoading && handleLoading(false)
45
54
  handleErrors && handleErrors(err.message)
46
55
  }
@@ -48,7 +57,7 @@ export const FacebookLogin = (props: any) => {
48
57
 
49
58
  const loginWithFacebook = () => {
50
59
  handleLoading && handleLoading(true)
51
- LoginManager && LoginManager.logInWithPermissions(['public_profile']).then(
60
+ LoginManager && LoginManager.logInWithPermissions(['public_profile', 'email']).then(
52
61
  (login: any) => {
53
62
  if (login.isCancelled) {
54
63
  const err = t('LOGIN_WITH_FACEBOOK_CANCELLED', 'Login cancelled')
@@ -58,6 +67,9 @@ export const FacebookLogin = (props: any) => {
58
67
  AccessToken.getCurrentAccessToken().then((data: any) => {
59
68
  const accessToken = data.accessToken.toString();
60
69
  handleLoginClick(accessToken)
70
+ }).catch((err : any) => {
71
+ handleErrors && handleErrors(err.message)
72
+ handleLoading && handleLoading(false)
61
73
  });
62
74
  }
63
75
  },
@@ -68,7 +80,10 @@ export const FacebookLogin = (props: any) => {
68
80
  handleLoading && handleLoading(false)
69
81
  handleErrors && handleErrors(err)
70
82
  },
71
- );
83
+ ).catch((err : any) => {
84
+ handleErrors && handleErrors(err.message)
85
+ handleLoading && handleLoading(false)
86
+ });
72
87
  };
73
88
 
74
89
  const onPressButton = auth
package/themes/original/src/components/LoginForm/index.tsx CHANGED
@@ -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
- <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>
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>
package/themes/original/src/components/PaymentOptionWallet/index.tsx CHANGED
@@ -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.map((wallet: any) => {
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: '40%', alignItems: 'flex-end' }}>
117
+ <View style={{maxWidth: '35%', alignItems: 'flex-end' }}>
118
118
  {wallet.type === 'cash' && (
119
119
  <OText>
120
120
  {parsePrice(wallet?.balance)}
package/themes/original/src/components/PaymentOptionWallet/styles.tsx CHANGED
@@ -17,6 +17,7 @@ export const Container = styled.View`
17
17
  `
18
18
 
19
19
  export const SectionLeft = styled.View`
20
+ margin-left: 20px;
20
21
  max-width: 55%;
21
22
  display: flex;
22
23
  flex-direction: row;
package/themes/original/src/components/ProductForm/index.tsx CHANGED
@@ -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
 
@@ -461,6 +475,31 @@ export const ProductOptionsUI = (props: any) => {
461
475
  {product?.description || productCart?.description}
462
476
  </OText>
463
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>
464
503
  {loading && !product ? (
465
504
  <>
466
505
  {[...Array(2)].map((item, i) => (
package/themes/original/src/components/ProductForm/styles.tsx CHANGED
@@ -37,7 +37,7 @@ export const ProductTitle = styled.View`
37
37
  `
38
38
 
39
39
  export const ProductDescription = styled.View`
40
- margin-bottom: 30px;
40
+ margin-bottom: 20px;
41
41
  `
42
42
 
43
43
  export const ProductEditions = styled.View`
package/themes/uber-eats/src/components/ProductForm/index.tsx CHANGED
@@ -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) => (