ordering-ui-react-native 0.16.60 → 0.16.61

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 (13) hide show
  1. package/package.json +1 -1
  2. package/themes/original/src/components/BusinessController/index.tsx +7 -1
  3. package/themes/original/src/components/BusinessProductsList/index.tsx +5 -1
  4. package/themes/original/src/components/BusinessProductsListing/index.tsx +3 -0
  5. package/themes/original/src/components/BusinessProductsListing/styles.tsx +1 -0
  6. package/themes/original/src/components/BusinessesListing/Layout/Original/index.tsx +14 -4
  7. package/themes/original/src/components/BusinessesListing/index.tsx +3 -2
  8. package/themes/original/src/components/ProductForm/index.tsx +175 -154
  9. package/themes/original/src/components/ProductForm/styles.tsx +3 -5
  10. package/themes/original/src/components/ProductOption/index.tsx +1 -1
  11. package/themes/original/src/components/SingleOrderCard/index.tsx +156 -121
  12. package/themes/original/src/components/SingleProductCard/index.tsx +11 -4
  13. package/themes/original/src/types/index.tsx +6 -2
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "ordering-ui-react-native",
3
- "version": "0.16.60",
3
+ "version": "0.16.61",
4
4
  "description": "Reusable components made in react native",
5
5
  "main": "src/index.tsx",
6
6
  "author": "ordering.inc",
package/themes/original/src/components/BusinessController/index.tsx CHANGED
@@ -7,6 +7,7 @@ import {
7
7
  useLanguage,
8
8
  useConfig,
9
9
  useToast,
10
+ useSession,
10
11
  ToastType
11
12
  } from 'ordering-components/native';
12
13
  import { OIcon, OText } from '../shared';
@@ -53,6 +54,7 @@ export const BusinessControllerUI = (props: BusinessControllerParams) => {
53
54
  const [{ parsePrice, parseDistance, parseNumber, optimizeImage }] = useUtils();
54
55
  const [, { showToast }] = useToast()
55
56
  const [orderState] = useOrder();
57
+ const [ { auth }] = useSession()
56
58
  const [configState] = useConfig();
57
59
  const [, t] = useLanguage();
58
60
  const theme = useTheme()
@@ -135,7 +137,11 @@ export const BusinessControllerUI = (props: BusinessControllerParams) => {
135
137
  }
136
138
 
137
139
  const handleChangeFavorite = () => {
138
- handleFavoriteBusiness && handleFavoriteBusiness(!business?.favorite)
140
+ if (auth) {
141
+ handleFavoriteBusiness && handleFavoriteBusiness(!business?.favorite)
142
+ } else {
143
+ navigation && navigation.navigate('Login');
144
+ }
139
145
  }
140
146
 
141
147
  return (
package/themes/original/src/components/BusinessProductsList/index.tsx CHANGED
@@ -35,7 +35,8 @@ const BusinessProductsListUI = (props: BusinessProductsListParams) => {
35
35
  onClickCategory,
36
36
  lazyLoadProductsRecommended,
37
37
  handleUpdateProducts,
38
- isFiltMode
38
+ isFiltMode,
39
+ navigation
39
40
  } = props;
40
41
 
41
42
  const [, t] = useLanguage();
@@ -128,6 +129,7 @@ const BusinessProductsListUI = (props: BusinessProductsListParams) => {
128
129
  onProductClick={() => onProductClick(product)}
129
130
  productAddedToCartLength={currentCart?.products?.reduce((productsLength: number, Cproduct: any) => { return productsLength + (Cproduct?.id === product?.id ? Cproduct?.quantity : 0) }, 0)}
130
131
  handleUpdateProducts={handleUpdateProducts}
132
+ navigation={navigation}
131
133
  />
132
134
  ))
133
135
  }
@@ -153,6 +155,7 @@ const BusinessProductsListUI = (props: BusinessProductsListParams) => {
153
155
  onProductClick={onProductClick}
154
156
  handleUpdateProducts={handleUpdateProducts}
155
157
  productAddedToCartLength={currentCart?.products?.reduce((productsLength: number, Cproduct: any) => { return productsLength + (Cproduct?.id === product?.id ? Cproduct?.quantity : 0) }, 0)}
158
+ navigation={navigation}
156
159
  />
157
160
  ),
158
161
  )}
@@ -246,6 +249,7 @@ const BusinessProductsListUI = (props: BusinessProductsListParams) => {
246
249
  categoryState={categoryState}
247
250
  onProductClick={onProductClick}
248
251
  handleUpdateProducts={handleUpdateProducts}
252
+ navigation={navigation}
249
253
  productAddedToCartLength={currentCart?.products?.reduce((productsLength: number, Cproduct: any) => { return productsLength + (Cproduct?.id === product?.id ? Cproduct?.quantity : 0) }, 0)}
250
254
  />
251
255
  ))}
package/themes/original/src/components/BusinessProductsListing/index.tsx CHANGED
@@ -323,6 +323,7 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
323
323
  setSubcategoriesSelected={setSubcategoriesSelected}
324
324
  onClickCategory={handleChangeCategory}
325
325
  handleUpdateProducts={handleUpdateProducts}
326
+ navigation={navigation}
326
327
  isFiltMode
327
328
  />
328
329
  </View>
@@ -425,6 +426,7 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
425
426
  setSubcategoriesSelected={setSubcategoriesSelected}
426
427
  onClickCategory={handleChangeCategory}
427
428
  handleUpdateProducts={handleUpdateProducts}
429
+ navigation={navigation}
428
430
  />
429
431
  </WrapContent>
430
432
  </>
@@ -447,6 +449,7 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
447
449
  isBusinessLoading={loading}
448
450
  errorQuantityProducts={errorQuantityProducts}
449
451
  handleUpdateProducts={handleUpdateProducts}
452
+ navigation={navigation}
450
453
  />
451
454
  </WrapContent>
452
455
  </>
package/themes/original/src/components/BusinessProductsListing/styles.tsx CHANGED
@@ -64,4 +64,5 @@ export const ProfessionalFilterWrapper = styled.View`
64
64
  export const NearBusiness = styled.View`
65
65
  width: 100%;
66
66
  padding-left: 20px;
67
+ max-height: 80px;
67
68
  `
package/themes/original/src/components/BusinessesListing/Layout/Original/index.tsx CHANGED
@@ -133,7 +133,13 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
133
133
  borderRadius: 8,
134
134
  marginHorizontal: 40,
135
135
  height: 45
136
- }
136
+ },
137
+ businessSkeleton: {
138
+ borderRadius: 8,
139
+ marginRight: 20,
140
+ width: 56,
141
+ height: 56
142
+ },
137
143
  });
138
144
 
139
145
 
@@ -286,9 +292,13 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
286
292
  <BusinessLogosContainer horizontal>
287
293
  {businessesList?.loading ? (
288
294
  <Placeholder Animation={Fade}>
289
- {[...Array(10).keys()].map(item => (
290
- <PlaceholderLine key={item} width={56} height={56} />
291
- ))}
295
+ <View style={{ flexDirection: 'row' }}>
296
+ {[...Array(10).keys()].map(i => (
297
+ <View style={styles.businessSkeleton} key={i}>
298
+ <PlaceholderLine style={{ width: '100%', height: '100%' }} />
299
+ </View>
300
+ ))}
301
+ </View>
292
302
  </Placeholder>
293
303
  ) : (
294
304
  <>
package/themes/original/src/components/BusinessesListing/index.tsx CHANGED
@@ -9,6 +9,7 @@ import { OBottomPopup } from '../shared';
9
9
  import { ReviewTrigger } from '../ReviewTrigger';
10
10
 
11
11
  export const BusinessesListing = (props: any) => {
12
+ const { logosLayout } = props
12
13
  const theme = useTheme()
13
14
  const layout = theme?.layouts?.business_listing_view?.components?.layout?.type || 'original'
14
15
  const [, t] = useLanguage();
@@ -76,8 +77,8 @@ export const BusinessesListing = (props: any) => {
76
77
 
77
78
  return (
78
79
  <>
79
- {(layout === 'original') && <OriginalBusinessListing {...props} />}
80
- {(layout === 'appointment') && <AppointmentBusinessListing {...props} />}
80
+ {((layout === 'original') || logosLayout) && <OriginalBusinessListing {...props} />}
81
+ {(layout === 'appointment') && !logosLayout && <AppointmentBusinessListing {...props} />}
81
82
 
82
83
  {lastOrderReview?.isReviewOpen && (
83
84
  <OBottomPopup
package/themes/original/src/components/ProductForm/index.tsx CHANGED
@@ -151,6 +151,13 @@ export const ProductOptionsUI = (props: any) => {
151
151
  productTagNameStyle: {
152
152
  paddingHorizontal: 6,
153
153
  marginRight: 5
154
+ },
155
+ actionContainer: {
156
+ flexDirection: 'row',
157
+ alignItems: 'center',
158
+ justifyContent: 'space-between',
159
+ width: '100%',
160
+ marginTop: 10
154
161
  }
155
162
  });
156
163
 
@@ -304,7 +311,9 @@ export const ProductOptionsUI = (props: any) => {
304
311
  selOpt == id ? theme.colors.textNormal : theme.colors.textSecondary
305
312
  }
306
313
  size={selOpt == id ? 14 : 12}
307
- weight={selOpt == id ? '600' : 'normal'}>
314
+ weight={selOpt == id ? '600' : 'normal'}
315
+ style={{ maxWidth: 150 }}
316
+ numberOfLines={1}>
308
317
  {name}
309
318
  </OText>
310
319
  </TouchableOpacity>
@@ -366,6 +375,77 @@ export const ProductOptionsUI = (props: any) => {
366
375
  }
367
376
  }, [product])
368
377
 
378
+ const ActionButton = () => {
379
+ return (
380
+ <View
381
+ style={{
382
+ width: isHaveWeight ? '100%' : ((isSoldOut || maxProductQuantity <= 0) ? '60%' : '40%'),
383
+ }}>
384
+ {((productCart &&
385
+ auth &&
386
+ orderState.options?.address_id) || (isSoldOut || maxProductQuantity <= 0)) && (
387
+ <OButton
388
+ onClick={() => handleSaveProduct()}
389
+ imgRightSrc=""
390
+ text={`${orderState.loading
391
+ ? t('LOADING', 'Loading')
392
+ : (isSoldOut || maxProductQuantity <= 0)
393
+ ? t('SOLD_OUT', 'Sold out')
394
+ : editMode
395
+ ? t('UPDATE', 'Update')
396
+ : t('ADD', 'Add')
397
+ }`}
398
+ isDisabled={isSoldOut || maxProductQuantity <= 0 || (product?.minimum_per_order && (productCart?.quantity < product?.minimum_per_order)) || (product?.maximum_per_order && (productCart?.quantity > product?.maximum_per_order))}
399
+ textStyle={{
400
+ color: saveErrors || isSoldOut || maxProductQuantity <= 0 ? theme.colors.primary : theme.colors.white,
401
+ fontSize: orderState.loading || editMode ? 10 : 14
402
+ }}
403
+ style={{
404
+ 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,
405
+ 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,
406
+ opacity: saveErrors || isSoldOut || maxProductQuantity <= 0 ? 0.3 : 1,
407
+ borderRadius: 7.6,
408
+ height: 44,
409
+ shadowOpacity: 0,
410
+ borderWidth: 1,
411
+ marginTop: isHaveWeight ? 10: 0
412
+ }}
413
+ />
414
+ )}
415
+ {auth &&
416
+ !orderState.options?.address_id &&
417
+ (orderState.loading ? (
418
+ <OButton
419
+ isDisabled
420
+ text={t('LOADING', 'Loading')}
421
+ imgRightSrc=""
422
+ textStyle={{ fontSize: 10 }}
423
+ />
424
+ ) : (
425
+ <OButton onClick={navigation.navigate('AddressList')} />
426
+ ))}
427
+ {!auth && (
428
+ <OButton
429
+ isDisabled={isSoldOut || maxProductQuantity <= 0}
430
+ onClick={() => handleRedirectLogin()}
431
+ text={
432
+ isSoldOut || maxProductQuantity <= 0
433
+ ? t('SOLD_OUT', 'Sold out')
434
+ : t('LOGIN_SIGNUP', 'Login / Sign Up')
435
+ }
436
+ imgRightSrc=""
437
+ textStyle={{ color: theme.colors.primary, fontSize: 14 }}
438
+ style={{
439
+ height: 44,
440
+ borderColor: theme.colors.primary,
441
+ backgroundColor: theme.colors.white,
442
+ }}
443
+ />
444
+ )}
445
+ </View>
446
+ )
447
+ }
448
+
369
449
  return (
370
450
  <SafeAreaView style={{ flex: 1 }}>
371
451
  <TopHeader>
@@ -886,173 +966,114 @@ export const ProductOptionsUI = (props: any) => {
886
966
  </ScrollView>
887
967
  )}
888
968
  {!loading && !error && product && (
889
- <ProductActions ios={Platform?.OS === 'ios'}>
890
- <View>
891
- <OText size={16} lineHeight={24} weight={'600'}>
892
- {productCart.total ? parsePrice(productCart?.total) : ''}
893
- </OText>
894
- {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>}
895
- {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>}
896
- </View>
897
- {productCart && !isSoldOut && maxProductQuantity > 0 && (
898
- <View style={styles.quantityControl}>
899
- <TouchableOpacity
900
- onPress={decrement}
901
- disabled={productCart.quantity === 1 || isSoldOut}>
902
- <OIcon
903
- src={theme.images.general.minus}
904
- width={16}
905
- color={
906
- productCart.quantity === 1 || isSoldOut
907
- ? theme.colors.backgroundGray
908
- : theme.colors.backgroundDark
909
- }
910
- />
911
- </TouchableOpacity>
912
- {qtyBy?.pieces && (
913
- <TextInput
914
- keyboardType='numeric'
915
- value={`${productCart?.quantity > 0 ? productCart?.quantity : ''}`}
916
- onChangeText={(val: any) => onChangeProductCartQuantity(parseInt(val))}
917
- editable={!orderState.loading}
918
- style={{
919
- borderWidth: 1,
920
- textAlign: 'center',
921
- minWidth: 60,
922
- borderRadius: 8,
923
- borderColor: theme.colors.inputBorderColor,
924
- height: 44,
925
- marginHorizontal: 10
926
- }}
927
- />
928
- )}
929
- {qtyBy?.weight_unit && (
930
- <OText
931
- size={12}
932
- lineHeight={18}
933
- style={{ minWidth: 40, textAlign: 'center' }}
934
- >
935
- {productCart.quantity * product?.weight}
936
- </OText>
937
- )}
938
- <TouchableOpacity
939
- onPress={increment}
940
- disabled={
941
- maxProductQuantity <= 0 ||
942
- productCart.quantity >= maxProductQuantity ||
943
- isSoldOut
944
- }>
945
- <OIcon
946
- src={theme.images.general.plus}
947
- width={16}
948
- color={
949
- maxProductQuantity <= 0 ||
969
+ <ProductActions ios={Platform?.OS === 'ios'} isColumn={isHaveWeight}>
970
+ <View style={styles.actionContainer}>
971
+ <View>
972
+ <OText size={16} lineHeight={24} weight={'600'}>
973
+ {productCart.total ? parsePrice(productCart?.total) : ''}
974
+ </OText>
975
+ {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>}
976
+ {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>}
977
+ </View>
978
+ {productCart && !isSoldOut && maxProductQuantity > 0 && (
979
+ <>
980
+ <View style={styles.quantityControl}>
981
+ <TouchableOpacity
982
+ onPress={decrement}
983
+ disabled={productCart.quantity === 1 || isSoldOut}>
984
+ <OIcon
985
+ src={theme.images.general.minus}
986
+ width={16}
987
+ color={
988
+ productCart.quantity === 1 || isSoldOut
989
+ ? theme.colors.backgroundGray
990
+ : theme.colors.backgroundDark
991
+ }
992
+ />
993
+ </TouchableOpacity>
994
+ {qtyBy?.pieces && (
995
+ <TextInput
996
+ keyboardType='numeric'
997
+ value={`${productCart?.quantity > 0 ? productCart?.quantity : ''}`}
998
+ onChangeText={(val: any) => onChangeProductCartQuantity(parseInt(val))}
999
+ editable={!orderState.loading}
1000
+ style={{
1001
+ borderWidth: 1,
1002
+ textAlign: 'center',
1003
+ minWidth: 60,
1004
+ borderRadius: 8,
1005
+ borderColor: theme.colors.inputBorderColor,
1006
+ height: 44,
1007
+ marginHorizontal: 10
1008
+ }}
1009
+ />
1010
+ )}
1011
+ {qtyBy?.weight_unit && (
1012
+ <OText
1013
+ size={12}
1014
+ lineHeight={18}
1015
+ style={{ minWidth: 40, textAlign: 'center' }}
1016
+ >
1017
+ {productCart.quantity * product?.weight}
1018
+ </OText>
1019
+ )}
1020
+ <TouchableOpacity
1021
+ onPress={increment}
1022
+ disabled={
1023
+ maxProductQuantity <= 0 ||
950
1024
  productCart.quantity >= maxProductQuantity ||
951
1025
  isSoldOut
952
- ? theme.colors.backgroundGray
953
- : theme.colors.backgroundDark
954
- }
955
- />
956
- </TouchableOpacity>
957
- {isHaveWeight && (
958
- <WeightUnitSwitch>
959
- <TouchableOpacity
960
- onPress={() => handleSwitchQtyUnit('pieces')}
961
- >
962
- <WeightUnitItem active={qtyBy?.pieces}>
963
- <OText
964
- size={12}
965
- lineHeight={18}
966
- color={qtyBy?.pieces ? theme.colors.primary : theme.colors.textNormal}
967
- >
968
- {t('PIECES', 'pcs')}
969
- </OText>
970
- </WeightUnitItem>
1026
+ }>
1027
+ <OIcon
1028
+ src={theme.images.general.plus}
1029
+ width={16}
1030
+ color={
1031
+ maxProductQuantity <= 0 ||
1032
+ productCart.quantity >= maxProductQuantity ||
1033
+ isSoldOut
1034
+ ? theme.colors.backgroundGray
1035
+ : theme.colors.backgroundDark
1036
+ }
1037
+ />
971
1038
  </TouchableOpacity>
972
- <View style={{ alignItems: 'flex-start' }}>
1039
+ </View>
1040
+ {isHaveWeight && (
1041
+ <WeightUnitSwitch>
973
1042
  <TouchableOpacity
974
- onPress={() => handleSwitchQtyUnit('weight_unit')}
1043
+ onPress={() => handleSwitchQtyUnit('pieces')}
975
1044
  >
976
- <WeightUnitItem active={qtyBy?.weight_unit}>
1045
+ <WeightUnitItem active={qtyBy?.pieces}>
977
1046
  <OText
978
1047
  size={12}
979
1048
  lineHeight={18}
980
- color={qtyBy?.weight_unit ? theme.colors.primary : theme.colors.textNormal}
1049
+ color={qtyBy?.pieces ? theme.colors.primary : theme.colors.textNormal}
981
1050
  >
982
- {product?.weight_unit}
1051
+ {t('PIECES', 'pcs')}
983
1052
  </OText>
984
1053
  </WeightUnitItem>
985
1054
  </TouchableOpacity>
986
- </View>
987
- </WeightUnitSwitch>
988
- )}
989
- </View>
990
- )}
991
- <View
992
- style={{
993
- width: isSoldOut || maxProductQuantity <= 0 ? '60%' : '40%',
994
- }}>
995
- {((productCart &&
996
- auth &&
997
- orderState.options?.address_id) || (isSoldOut || maxProductQuantity <= 0)) && (
998
- <OButton
999
- onClick={() => handleSaveProduct()}
1000
- imgRightSrc=""
1001
- text={`${orderState.loading
1002
- ? t('LOADING', 'Loading')
1003
- : (isSoldOut || maxProductQuantity <= 0)
1004
- ? t('SOLD_OUT', 'Sold out')
1005
- : editMode
1006
- ? t('UPDATE', 'Update')
1007
- : t('ADD', 'Add')
1008
- }`}
1009
- isDisabled={isSoldOut || maxProductQuantity <= 0 || (product?.minimum_per_order && (productCart?.quantity < product?.minimum_per_order)) || (product?.maximum_per_order && (productCart?.quantity > product?.maximum_per_order))}
1010
- textStyle={{
1011
- color: saveErrors || isSoldOut || maxProductQuantity <= 0 ? theme.colors.primary : theme.colors.white,
1012
- fontSize: orderState.loading || editMode ? 10 : 14
1013
- }}
1014
- style={{
1015
- 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,
1016
- 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,
1017
- opacity: saveErrors || isSoldOut || maxProductQuantity <= 0 ? 0.3 : 1,
1018
- borderRadius: 7.6,
1019
- height: 44,
1020
- shadowOpacity: 0,
1021
- borderWidth: 1,
1022
- }}
1023
- />
1024
- )}
1025
- {auth &&
1026
- !orderState.options?.address_id &&
1027
- (orderState.loading ? (
1028
- <OButton
1029
- isDisabled
1030
- text={t('LOADING', 'Loading')}
1031
- imgRightSrc=""
1032
- textStyle={{ fontSize: 10 }}
1033
- />
1034
- ) : (
1035
- <OButton onClick={navigation.navigate('AddressList')} />
1036
- ))}
1037
- {!auth && (
1038
- <OButton
1039
- isDisabled={isSoldOut || maxProductQuantity <= 0}
1040
- onClick={() => handleRedirectLogin()}
1041
- text={
1042
- isSoldOut || maxProductQuantity <= 0
1043
- ? t('SOLD_OUT', 'Sold out')
1044
- : t('LOGIN_SIGNUP', 'Login / Sign Up')
1045
- }
1046
- imgRightSrc=""
1047
- textStyle={{ color: theme.colors.primary, fontSize: 14 }}
1048
- style={{
1049
- height: 44,
1050
- borderColor: theme.colors.primary,
1051
- backgroundColor: theme.colors.white,
1052
- }}
1053
- />
1055
+ <View style={{ alignItems: 'flex-start' }}>
1056
+ <TouchableOpacity
1057
+ onPress={() => handleSwitchQtyUnit('weight_unit')}
1058
+ >
1059
+ <WeightUnitItem active={qtyBy?.weight_unit}>
1060
+ <OText
1061
+ size={12}
1062
+ lineHeight={18}
1063
+ color={qtyBy?.weight_unit ? theme.colors.primary : theme.colors.textNormal}
1064
+ >
1065
+ {product?.weight_unit}
1066
+ </OText>
1067
+ </WeightUnitItem>
1068
+ </TouchableOpacity>
1069
+ </View>
1070
+ </WeightUnitSwitch>
1071
+ )}
1072
+ </>
1054
1073
  )}
1074
+ {!isHaveWeight && <ActionButton />}
1055
1075
  </View>
1076
+ {isHaveWeight && <ActionButton />}
1056
1077
  </ProductActions>
1057
1078
  )}
1058
1079
  </SafeAreaView>
package/themes/original/src/components/ProductForm/styles.tsx CHANGED
@@ -65,21 +65,19 @@ export const WrapperSubOption = styled.View`
65
65
  `
66
66
 
67
67
  export const ProductComment = styled.View`
68
- padding-bottom: 50px;
68
+ padding-bottom: 60px;
69
69
  `
70
70
 
71
71
  export const ProductActions = styled.View`
72
72
  position: absolute;
73
73
  bottom: 0px;
74
- min-height: 70px;
75
74
  padding-top: ${(props: any) => props.ios ? '20px' : '0'};
76
75
  padding-horizontal: 40px;
76
+ padding-vertical: 20px;
77
77
  width: 100%;
78
- flex-direction: row;
78
+ flex-direction: ${(props: any) => props.isColumn ? 'column' : 'row'};
79
79
  background-color: #FFF;
80
80
  z-index: 1000;
81
- align-items: center;
82
- justify-content: space-between;
83
81
  border-top-width: 1px;
84
82
  border-top-color: ${(props: any) => props.theme.colors.border};
85
83
  `
package/themes/original/src/components/ProductOption/index.tsx CHANGED
@@ -30,7 +30,7 @@ const ProductOptionUI = (props: any) => {
30
30
  return (
31
31
  <Container style={{ color: error ? 'orange' : theme.colors.white }}>
32
32
  <WrapHeader>
33
- <OText size={16} lineHeight={24} weight={'600'}>{option.name}</OText>
33
+ <OText size={16} lineHeight={24} weight={'600'} style={{ flex: 1 }}>{option.name}</OText>
34
34
  <OText color={theme.colors.red}>{maxMin}</OText>
35
35
  </WrapHeader>
36
36
  {children}
package/themes/original/src/components/SingleOrderCard/index.tsx CHANGED
@@ -2,6 +2,7 @@ import React, { useState } from 'react';
2
2
  import {
3
3
  SingleOrderCard as SingleOrderCardController,
4
4
  useUtils,
5
+ useOrder,
5
6
  useLanguage
6
7
  } from 'ordering-components/native';
7
8
  import { StyleSheet, TouchableOpacity, View } from 'react-native';
@@ -9,6 +10,7 @@ import { useTheme } from 'styled-components/native';
9
10
  import { OIcon, OText, OButton } from '../shared';
10
11
  import IconAntDesign from 'react-native-vector-icons/AntDesign'
11
12
  import { SingleOrderCardParams } from '../../types';
13
+ import { OAlert } from '../../../../../src/components/shared'
12
14
 
13
15
  import {
14
16
  Container,
@@ -32,14 +34,18 @@ const SingleOrderCardUI = (props: SingleOrderCardParams) => {
32
34
  onNavigationRedirect,
33
35
  pastOrders,
34
36
  isMessageView,
35
- handleClickOrder
37
+ handleClickOrder,
38
+ handleRemoveCart,
39
+ cartState
36
40
  } = props;
37
41
 
38
42
  const [{ parsePrice, optimizeImage, parseDate }] = useUtils();
39
43
  const [, t] = useLanguage();
44
+ const [{ carts }] = useOrder()
40
45
  const theme = useTheme();
41
46
 
42
47
  const [reorderSelected, setReorderSelected] = useState<number | null>(null);
48
+ const [confirm, setConfirm] = useState<any>({ open: false, content: null, handleOnAccept: null, id: null, title: null })
43
49
 
44
50
  const allowedOrderStatus = [1, 2, 5, 6, 10, 11, 12];
45
51
 
@@ -97,9 +103,21 @@ const SingleOrderCardUI = (props: SingleOrderCardParams) => {
97
103
  }
98
104
  });
99
105
 
100
- const handleReorderClick = (id: number) => {
101
- setReorderSelected(id);
102
- handleReorder && handleReorder(id);
106
+ const handleReorderClick = (order: any) => {
107
+ if (carts[`businessId:${order?.business_id}`] && carts[`businessId:${order?.business_id}`]?.products?.length > 0) {
108
+ setConfirm({
109
+ open: true,
110
+ content: [t('QUESTION_DELETE_PRODUCTS_FROM_CART', 'Are you sure that you want to delete all products from cart?')],
111
+ title: t('ORDER', 'Order'),
112
+ handleOnAccept: async () => {
113
+ handleRemoveCart()
114
+ setConfirm({ ...confirm, open: false })
115
+ }
116
+ })
117
+ } else {
118
+ setReorderSelected(order?.id);
119
+ handleReorder && handleReorder(order?.id);
120
+ }
103
121
  };
104
122
 
105
123
  const handleClickOrderReview = (order: any) => {
@@ -135,134 +153,151 @@ const SingleOrderCardUI = (props: SingleOrderCardParams) => {
135
153
  handleFavoriteOrder && handleFavoriteOrder(!order?.favorite)
136
154
  };
137
155
 
156
+ const handleOriginalReorder = () => {
157
+ setConfirm({ ...confirm, open: false, title: null })
158
+ setReorderSelected(order?.id);
159
+ handleReorder && handleReorder(order?.id);
160
+ }
161
+
138
162
  return (
139
- <Container
140
- onPress={() => handleClickViewOrder(order?.uuid)}
141
- activeOpacity={0.7}
142
- >
143
- <InnerContainer>
144
- {!!order.business?.logo && (
145
- <Logo style={styles.logoWrapper}>
146
- <OIcon
147
- url={optimizeImage(order.business?.logo, 'h_300,c_limit')}
148
- style={styles.logo}
149
- />
150
- </Logo>
151
- )}
152
- <CardInfoWrapper>
153
- <ContentHeader>
154
- <View style={{ flex: 1 }}>
155
- <OText size={12} lineHeight={18} weight={'600'} numberOfLines={1} ellipsizeMode={'tail'}>
156
- {order.business?.name}
157
- </OText>
158
- </View>
159
- {!!!pastOrders && (
160
- <>
161
- {isMessageView ? (
162
- <>
163
- {order?.unread_count > 0 && (
164
- <UnreadMessageCounter>
165
- <OText size={12} color={theme.colors.primary} lineHeight={18} >
166
- {order?.unread_count}
163
+ <>
164
+ <Container
165
+ onPress={() => handleClickViewOrder(order?.uuid)}
166
+ activeOpacity={0.7}
167
+ >
168
+ <InnerContainer>
169
+ {!!order.business?.logo && (
170
+ <Logo style={styles.logoWrapper}>
171
+ <OIcon
172
+ url={optimizeImage(order.business?.logo, 'h_300,c_limit')}
173
+ style={styles.logo}
174
+ />
175
+ </Logo>
176
+ )}
177
+ <CardInfoWrapper>
178
+ <ContentHeader>
179
+ <View style={{ flex: 1 }}>
180
+ <OText size={12} lineHeight={18} weight={'600'} numberOfLines={1} ellipsizeMode={'tail'}>
181
+ {order.business?.name}
182
+ </OText>
183
+ </View>
184
+ {!!!pastOrders && (
185
+ <>
186
+ {isMessageView ? (
187
+ <>
188
+ {order?.unread_count > 0 && (
189
+ <UnreadMessageCounter>
190
+ <OText size={12} color={theme.colors.primary} lineHeight={18} >
191
+ {order?.unread_count}
192
+ </OText>
193
+ </UnreadMessageCounter>
194
+ )}
195
+ </>
196
+ ) : (
197
+ <Price>
198
+ <OText size={12} lineHeight={18}>
199
+ {parsePrice(order?.summary?.total || order?.total)}
200
+ </OText>
201
+ </Price>
202
+ )}
203
+ </>
204
+ )}
205
+ {!!pastOrders && (
206
+ <ButtonWrapper>
207
+ {allowedOrderStatus.includes(parseInt(order?.status)) &&
208
+ !order.review && (
209
+ <TouchableOpacity
210
+ onPress={() => handleClickOrderReview(order)}
211
+ style={styles.reviewButton}>
212
+ <OText size={10} color={theme.colors.primary} numberOfLines={1}>
213
+ {t('REVIEW', 'Review')}
167
214
  </OText>
168
- </UnreadMessageCounter>
215
+ </TouchableOpacity>
169
216
  )}
170
- </>
171
- ) : (
172
- <Price>
173
- <OText size={12} lineHeight={18}>
174
- {parsePrice(order?.summary?.total || order?.total)}
175
- </OText>
176
- </Price>
177
- )}
178
- </>
179
- )}
180
- {!!pastOrders && (
181
- <ButtonWrapper>
182
- {allowedOrderStatus.includes(parseInt(order?.status)) &&
183
- !order.review && (
184
- <TouchableOpacity
185
- onPress={() => handleClickOrderReview(order)}
186
- style={styles.reviewButton}>
187
- <OText size={10} color={theme.colors.primary} numberOfLines={1}>
188
- {t('REVIEW', 'Review')}
217
+ {order.cart && (
218
+ <OButton
219
+ text={t('REORDER', 'Reorder')}
220
+ imgRightSrc={''}
221
+ textStyle={styles.buttonText}
222
+ style={
223
+ ((reorderLoading && order.id === reorderSelected) || cartState?.loading)
224
+ ? styles.reorderLoading
225
+ : styles.reorderbutton
226
+ }
227
+ onClick={() => handleReorderClick(order)}
228
+ isLoading={(reorderLoading && order.id === reorderSelected) || cartState?.loading}
229
+ />
230
+ )}
231
+ </ButtonWrapper>
232
+ )}
233
+ </ContentHeader>
234
+ <ContentFooter>
235
+ <View style={{ flex: 1 }}>
236
+ <View style={styles.infoText}>
237
+ {!!!pastOrders && (
238
+ <>
239
+ <OText
240
+ size={10}
241
+ space
242
+ color={theme.colors.textSecondary}
243
+ style={{ marginVertical: 3 }}
244
+ lineHeight={15}
245
+ numberOfLines={1}
246
+ >
247
+ {t('ORDER_NO', 'Order No') + '.'}
189
248
  </OText>
190
- </TouchableOpacity>
249
+ <OText
250
+ size={10}
251
+ color={theme.colors.textSecondary}
252
+ style={{ marginVertical: 3 }}
253
+ lineHeight={15}
254
+ numberOfLines={1}
255
+ >
256
+ {order.id + ` \u2022 `}
257
+ </OText>
258
+ </>
191
259
  )}
192
- {order.cart && (
193
- <OButton
194
- text={t('REORDER', 'Reorder')}
195
- imgRightSrc={''}
196
- textStyle={styles.buttonText}
197
- style={
198
- reorderLoading && order.id === reorderSelected
199
- ? styles.reorderLoading
200
- : styles.reorderbutton
201
- }
202
- onClick={() => handleReorderClick(order.id)}
203
- isLoading={reorderLoading && order.id === reorderSelected}
204
- />
205
- )}
206
- </ButtonWrapper>
207
- )}
208
- </ContentHeader>
209
- <ContentFooter>
210
- <View style={{ flex: 1 }}>
211
- <View style={styles.infoText}>
212
- {!!!pastOrders && (
213
- <>
214
- <OText
215
- size={10}
216
- space
217
- color={theme.colors.textSecondary}
218
- style={{ marginVertical: 3 }}
219
- lineHeight={15}
220
- numberOfLines={1}
221
- >
222
- {t('ORDER_NO', 'Order No') + '.'}
223
- </OText>
224
- <OText
225
- size={10}
226
- color={theme.colors.textSecondary}
227
- style={{ marginVertical: 3 }}
228
- lineHeight={15}
229
- numberOfLines={1}
230
- >
231
- {order.id + ` \u2022 `}
232
- </OText>
233
- </>
234
- )}
260
+ <OText
261
+ size={10}
262
+ lineHeight={15}
263
+ color={theme.colors.textSecondary}
264
+ style={{ marginVertical: 3 }}
265
+ numberOfLines={1}>
266
+ {order?.delivery_datetime_utc ? parseDate(order?.delivery_datetime_utc) : parseDate(order?.delivery_datetime, { utc: false })}
267
+ </OText>
268
+ </View>
235
269
  <OText
270
+ color={theme.colors.primary}
236
271
  size={10}
237
272
  lineHeight={15}
238
- color={theme.colors.textSecondary}
239
- style={{ marginVertical: 3 }}
240
273
  numberOfLines={1}>
241
- {order?.delivery_datetime_utc ? parseDate(order?.delivery_datetime_utc) : parseDate(order?.delivery_datetime, { utc: false })}
274
+ {getOrderStatus(order.status)?.value}
242
275
  </OText>
243
276
  </View>
244
- <OText
245
- color={theme.colors.primary}
246
- size={10}
247
- lineHeight={15}
248
- numberOfLines={1}>
249
- {getOrderStatus(order.status)?.value}
250
- </OText>
251
- </View>
252
- <TouchableOpacity
253
- onPress={handleChangeFavorite}
254
- style={{ marginTop: 5 }}
255
- >
256
- <IconAntDesign
257
- name={order?.favorite ? 'heart' : 'hearto'}
258
- color={theme.colors.danger5}
259
- size={16}
260
- />
261
- </TouchableOpacity>
262
- </ContentFooter>
263
- </CardInfoWrapper>
264
- </InnerContainer>
265
- </Container>
277
+ <TouchableOpacity
278
+ onPress={handleChangeFavorite}
279
+ style={{ marginTop: 5 }}
280
+ >
281
+ <IconAntDesign
282
+ name={order?.favorite ? 'heart' : 'hearto'}
283
+ color={theme.colors.danger5}
284
+ size={16}
285
+ />
286
+ </TouchableOpacity>
287
+ </ContentFooter>
288
+ </CardInfoWrapper>
289
+ </InnerContainer>
290
+ </Container>
291
+ <OAlert
292
+ open={confirm.open}
293
+ title={confirm.title}
294
+ content={confirm.content}
295
+ onAccept={confirm.handleOnAccept}
296
+ onCancel={() => handleOriginalReorder()}
297
+ onClose={() => handleOriginalReorder()}
298
+ />
299
+ </>
300
+
266
301
  )
267
302
  }
268
303
 
package/themes/original/src/components/SingleProductCard/index.tsx CHANGED
@@ -4,6 +4,7 @@ import {
4
4
  useConfig,
5
5
  useOrder,
6
6
  useUtils,
7
+ useSession,
7
8
  SingleProductCard as SingleProductCardController
8
9
  } from 'ordering-components/native';
9
10
  import { useTheme } from 'styled-components/native';
@@ -32,7 +33,9 @@ const SinguleProductCardUI = React.memo((props: SingleProductCardParams) => {
32
33
  productAddedToCartLength,
33
34
  style,
34
35
  handleFavoriteProduct,
35
- enableIntersection
36
+ enableIntersection,
37
+ navigation,
38
+ businessId
36
39
  } = props;
37
40
 
38
41
  const theme = useTheme();
@@ -86,9 +89,9 @@ const SinguleProductCardUI = React.memo((props: SingleProductCardParams) => {
86
89
  }
87
90
  });
88
91
 
89
-
90
92
  const [, t] = useLanguage();
91
93
  const [stateConfig] = useConfig();
94
+ const [{ auth }] = useSession()
92
95
  const [{ parsePrice, optimizeImage }] = useUtils();
93
96
  const [orderState] = useOrder()
94
97
  const [isIntersectionObserver, setIsIntersectionObserver] = useState(!enableIntersection)
@@ -118,7 +121,11 @@ const SinguleProductCardUI = React.memo((props: SingleProductCardParams) => {
118
121
  );
119
122
 
120
123
  const handleChangeFavorite = () => {
121
- handleFavoriteProduct && handleFavoriteProduct(!product?.favorite)
124
+ if (auth) {
125
+ handleFavoriteProduct && handleFavoriteProduct(!product?.favorite)
126
+ } else {
127
+ navigation && navigation.navigate('Login');
128
+ }
122
129
  }
123
130
 
124
131
  return (
@@ -148,7 +155,7 @@ const SinguleProductCardUI = React.memo((props: SingleProductCardParams) => {
148
155
  weight={'500'}
149
156
  numberOfLines={1}
150
157
  ellipsizeMode="tail"
151
- style={styles.line18}>
158
+ style={{ ...styles.line18, flex: 1 }}>
152
159
  {product?.name}
153
160
  </OText>
154
161
  <TouchableOpacity
package/themes/original/src/types/index.tsx CHANGED
@@ -288,7 +288,8 @@ export interface BusinessProductsListParams {
288
288
  onClickCategory?: any,
289
289
  lazyLoadProductsRecommended?: boolean,
290
290
  isFiltMode?: boolean,
291
- handleUpdateProducts?: any
291
+ handleUpdateProducts?: any,
292
+ navigation?: any;
292
293
  }
293
294
  export interface SingleProductCardParams {
294
295
  businessId: any;
@@ -301,6 +302,7 @@ export interface SingleProductCardParams {
301
302
  handleFavoriteProduct?: any;
302
303
  handleUpdateProducts?: any;
303
304
  enableIntersection?: boolean;
305
+ navigation?: any;
304
306
  }
305
307
  export interface BusinessInformationParams {
306
308
  navigation?: any,
@@ -695,7 +697,9 @@ export interface SingleOrderCardParams {
695
697
  onNavigationRedirect?: (route: string, params?: any) => {},
696
698
  pastOrders: any,
697
699
  isMessageView?: any,
698
- handleClickOrder: (value: any) => {}
700
+ handleClickOrder: (value: any) => {},
701
+ handleRemoveCart: () => {},
702
+ cartState: any
699
703
  }
700
704
 
701
705
  export interface PreviousBusinessOrderedParams {