ordering-ui-react-native 0.14.33 → 0.14.36

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/ProductForm/index.tsx +41 -2
  3. package/src/components/ProductForm/styles.tsx +1 -1
  4. package/themes/doordash/src/components/ProductForm/index.tsx +41 -2
  5. package/themes/doordash/src/components/ProductForm/styles.tsx +1 -1
  6. package/themes/instacart/src/components/ProductForm/index.tsx +40 -1
  7. package/themes/instacart/src/components/ProductForm/styles.tsx +1 -1
  8. package/themes/original/src/components/BusinessPreorder/index.tsx +37 -35
  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.33",
3
+ "version": "0.14.36",
4
4
  "description": "Reusable components made in react native",
5
5
  "main": "src/index.tsx",
6
6
  "author": "ordering.inc",
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/BusinessPreorder/index.tsx CHANGED
@@ -46,7 +46,7 @@ const BusinessPreorderUI = (props: BusinessPreorderParams) => {
46
46
  const [menu, setMenu] = useState({})
47
47
  const [timeList, setTimeList] = useState<any>([])
48
48
  const [selectDate, setSelectedDate] = useState<any>(null)
49
- const [datesWhitelist, setDateWhitelist] = useState<any>([{start: null, end: null}])
49
+ const [datesWhitelist, setDateWhitelist] = useState<any>([{ start: null, end: null }])
50
50
 
51
51
  const styles = StyleSheet.create({
52
52
  container: {
@@ -54,19 +54,19 @@ const BusinessPreorderUI = (props: BusinessPreorderParams) => {
54
54
  paddingVertical: 30,
55
55
  paddingHorizontal: 40
56
56
  },
57
- businessLogo: {
58
- backgroundColor: 'white',
59
- width: 60,
60
- height: 60,
61
- borderRadius: 7.6,
62
- justifyContent: 'center',
63
- alignItems: 'center',
64
- shadowColor: '#000000',
65
- shadowOffset: { width: 0, height: 1 },
66
- shadowOpacity: 0.1,
67
- shadowRadius: 1,
68
- elevation: 2
69
- },
57
+ businessLogo: {
58
+ backgroundColor: 'white',
59
+ width: 60,
60
+ height: 60,
61
+ borderRadius: 7.6,
62
+ justifyContent: 'center',
63
+ alignItems: 'center',
64
+ shadowColor: '#000000',
65
+ shadowOffset: { width: 0, height: 1 },
66
+ shadowOpacity: 0.1,
67
+ shadowRadius: 1,
68
+ elevation: 2
69
+ },
70
70
  selectOption: {
71
71
  backgroundColor: theme.colors.backgroundGray100,
72
72
  borderRadius: 7.6,
@@ -82,7 +82,7 @@ const BusinessPreorderUI = (props: BusinessPreorderParams) => {
82
82
  paddingBottom: 15,
83
83
  borderBottomWidth: 1,
84
84
  borderColor: theme.colors.backgroundGray200,
85
- height: 100
85
+ height: 100,
86
86
  },
87
87
  calendarHeaderContainer: {
88
88
  flex: 1,
@@ -101,35 +101,36 @@ const BusinessPreorderUI = (props: BusinessPreorderParams) => {
101
101
  dateNumber: {
102
102
  color: '#B1BCCC',
103
103
  fontSize: 16,
104
- fontWeight: '500'
104
+ fontWeight: '500',
105
105
  },
106
106
  dateName: {
107
107
  color: '#B1BCCC',
108
108
  fontSize: 12,
109
- textTransform: 'capitalize'
109
+ textTransform: 'capitalize',
110
110
  },
111
111
  highlightDateName: {
112
112
  color: '#344050',
113
113
  fontSize: 12,
114
- textTransform: 'capitalize'
114
+ textTransform: 'capitalize',
115
115
  },
116
116
  highlightDateNumber: {
117
117
  color: '#344050',
118
118
  fontSize: 16,
119
- textTransform: 'capitalize'
119
+ textTransform: 'capitalize',
120
120
  },
121
121
  disabledDateName: {
122
122
  color: '#B1BCCC',
123
123
  fontSize: 10,
124
124
  textTransform: 'capitalize',
125
- opacity: 1
125
+ opacity: 1,
126
126
  },
127
127
  disabledDateNumber: {
128
128
  color: '#B1BCCC',
129
129
  fontSize: 14,
130
- fontWeight: '500'
130
+ fontWeight: '500',
131
+
131
132
  }
132
- })
133
+ })
133
134
 
134
135
  const preorderTypeList = [
135
136
  { key: 'business_hours', name: t('BUSINESS_HOURS', 'Business hours') },
@@ -191,7 +192,7 @@ const BusinessPreorderUI = (props: BusinessPreorderParams) => {
191
192
 
192
193
  const LeftSelector = () => {
193
194
  return (
194
- <View style={{height: '100%', justifyContent: 'flex-end'}}>
195
+ <View style={{ height: '100%', justifyContent: 'flex-end' }}>
195
196
  <IconAntDesign
196
197
  name='caretleft'
197
198
  color={theme.colors.textNormal}
@@ -203,7 +204,7 @@ const BusinessPreorderUI = (props: BusinessPreorderParams) => {
203
204
 
204
205
  const RightSelector = () => {
205
206
  return (
206
- <View style={{height: '100%', justifyContent: 'flex-end'}}>
207
+ <View style={{ height: '100%', justifyContent: 'flex-end' }}>
207
208
  <IconAntDesign
208
209
  name='caretright'
209
210
  color={theme.colors.textNormal}
@@ -280,7 +281,7 @@ const BusinessPreorderUI = (props: BusinessPreorderParams) => {
280
281
  name='close'
281
282
  color={theme.colors.textThird}
282
283
  size={24}
283
- style={{ marginLeft: -4}}
284
+ style={{ marginLeft: -4 }}
284
285
  />
285
286
  </TouchableOpacity>
286
287
  <BusinessInfoWrapper>
@@ -294,8 +295,8 @@ const BusinessPreorderUI = (props: BusinessPreorderParams) => {
294
295
  <FastImage
295
296
  style={{ width: 59, height: 59 }}
296
297
  source={{
297
- uri: optimizeImage(business?.logo, 'h_60,c_limit'),
298
- priority: FastImage.priority.normal,
298
+ uri: optimizeImage(business?.logo, 'h_60,c_limit'),
299
+ priority: FastImage.priority.normal,
299
300
  }}
300
301
  resizeMode={FastImage.resizeMode.cover}
301
302
  />
@@ -372,7 +373,7 @@ const BusinessPreorderUI = (props: BusinessPreorderParams) => {
372
373
  setMenu={setMenu}
373
374
  menu={menu}
374
375
  />
375
- </MenuWrapper>
376
+ </MenuWrapper>
376
377
  )}
377
378
  <OrderTimeWrapper>
378
379
  <OText
@@ -393,14 +394,15 @@ const BusinessPreorderUI = (props: BusinessPreorderParams) => {
393
394
  calendarHeaderStyle={styles.calendarHeader}
394
395
  dateNumberStyle={styles.dateNumber}
395
396
  dateNameStyle={styles.dateName}
396
- iconContainer={{flex: 0.1}}
397
+ iconContainer={{ flex: 0.1 }}
397
398
  highlightDateNameStyle={styles.highlightDateName}
398
399
  highlightDateNumberStyle={styles.highlightDateNumber}
400
+ dayContainerStyle={{ height: '100%' }}
401
+ highlightDateContainerStyle={{ height: '100%' }}
399
402
  calendarHeaderFormat='MMMM, YYYY'
400
- iconStyle={{borderWidth: 1}}
403
+ iconStyle={{ borderWidth: 1 }}
401
404
  selectedDate={selectDate}
402
405
  datesWhitelist={datesWhitelist}
403
- dayContainerStyle={{height: 40}}
404
406
  disabledDateNameStyle={styles.disabledDateName}
405
407
  disabledDateNumberStyle={styles.disabledDateNumber}
406
408
  disabledDateOpacity={0.6}
@@ -417,7 +419,7 @@ const BusinessPreorderUI = (props: BusinessPreorderParams) => {
417
419
  <TimeItem active={timeSelected === time.value}>
418
420
  <OText
419
421
  size={14}
420
- color={timeSelected === time.value ? theme.colors.primary: theme.colors.textNormal}
422
+ color={timeSelected === time.value ? theme.colors.primary : theme.colors.textNormal}
421
423
  style={{
422
424
  lineHeight: 24
423
425
  }}
@@ -426,15 +428,15 @@ const BusinessPreorderUI = (props: BusinessPreorderParams) => {
426
428
  </TouchableOpacity>
427
429
  ))}
428
430
  {timeList.length % 3 === 2 && (
429
- <TimeItem style={{backgroundColor: 'transparent'}}/>
431
+ <TimeItem style={{ backgroundColor: 'transparent' }} />
430
432
  )}
431
433
  </TimeContentWrapper>
432
434
  </TimeListWrapper>
433
435
  </OrderTimeWrapper>
434
436
  <OButton
435
437
  text={t('GO_TO_MENU', 'Go to menu')}
436
- textStyle={{color: 'white'}}
437
- style={{borderRadius: 7.6, marginBottom: 20, marginTop: 30}}
438
+ textStyle={{ color: 'white' }}
439
+ style={{ borderRadius: 7.6, marginBottom: 20, marginTop: 30 }}
438
440
  onClick={() => handleClickBusiness()}
439
441
  />
440
442
  </PreOrderContainer>
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) => (