ordering-ui-react-native 0.14.28 → 0.14.32

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 (12) hide show
  1. package/package.json +1 -1
  2. package/src/components/ProductForm/index.tsx +27 -19
  3. package/themes/original/src/components/BusinessPreorder/index.tsx +2 -1
  4. package/themes/original/src/components/BusinessProductsList/index.tsx +3 -3
  5. package/themes/original/src/components/DriverTips/index.tsx +3 -3
  6. package/themes/original/src/components/DriverTips/styles.tsx +5 -5
  7. package/themes/original/src/components/ProductForm/index.tsx +84 -13
  8. package/themes/original/src/components/ProductForm/styles.tsx +12 -0
  9. package/themes/original/src/components/ProductItemAccordion/index.tsx +2 -2
  10. package/themes/original/src/components/SingleProductCard/index.tsx +3 -4
  11. package/themes/original/src/components/SingleProductCard/styles.tsx +3 -1
  12. package/themes/original/src/types/index.tsx +1 -1
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "ordering-ui-react-native",
3
- "version": "0.14.28",
3
+ "version": "0.14.32",
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
@@ -132,7 +132,18 @@ export const ProductOptionsUI = (props: any) => {
132
132
  ) : (
133
133
  <>
134
134
  <View style={{ flexDirection: 'column', width: '100%' }}>
135
- <OText size={20} style={{ flex: I18nManager.isRTL ? 0 : 1, marginBottom: 10 }}>{product?.name || productCart.name}</OText>
135
+ <View style={{ flexDirection: 'row', marginTop: 15 }}>
136
+ <OText size={20} style={{ flex: I18nManager.isRTL ? 0 : 1, marginBottom: 10 }}>{product?.name || productCart.name}{' '}</OText>
137
+ {product?.calories && (
138
+ <OText size={16} style={styles.caloriesStyle}>{product?.calories} cal</OText>
139
+ )}
140
+ </View>
141
+ <View style={{ flexDirection: 'row', marginBottom: 10 }}>
142
+ <OText size={16} style={{ flex: I18nManager.isRTL ? 1 : 0 }} color={theme.colors.primary}>{productCart.price ? parsePrice(productCart.price) : ''}</OText>
143
+ {product?.offer_price && (
144
+ <OText style={styles.regularPriceStyle}>{parsePrice(product?.offer_price)}</OText>
145
+ )}
146
+ </View>
136
147
  {(product?.estimated_person || (product?.sku && product?.sku !== '-1' && product?.sku !== '1')) && (
137
148
  <OText size={14} style={{ flex: I18nManager.isRTL ? 1 : 0, marginBottom: 10 }} color={'#909BA9'}>
138
149
  {
@@ -147,12 +158,6 @@ export const ProductOptionsUI = (props: any) => {
147
158
  }
148
159
  </OText>
149
160
  )}
150
- <View style={{ flexDirection: 'row', marginBottom: 10}}>
151
- <OText size={16} style={{ flex: I18nManager.isRTL ? 1 : 0 }} color={theme.colors.primary}>{productCart.price ? parsePrice(productCart.price) : ''}</OText>
152
- {product?.offer_price && (
153
- <OText style={styles.regularPriceStyle}>{parsePrice(product?.offer_price)}</OText>
154
- )}
155
- </View>
156
161
  </View>
157
162
  </>
158
163
  )}
@@ -162,17 +167,17 @@ export const ProductOptionsUI = (props: any) => {
162
167
  </ProductDescription>
163
168
  {loading && !product ? (
164
169
  <>
165
- {[...Array(2)].map((item,i) => (
166
- <Placeholder key={i} style={{marginBottom: 20}} Animation={Fade}>
167
- <PlaceholderLine height={40} style={{ flex: 1, marginTop: 10 }} />
168
- {[...Array(3)].map((item,i) => (
169
- <View key={i} style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
170
- <PlaceholderLine height={30} width={10} style={{marginBottom: 20}} />
171
- <PlaceholderLine height={30} width={50} style={{marginBottom: 20}} />
172
- <PlaceholderLine height={30} width={30} style={{marginBottom: 20}} />
173
- </View>
174
- ))}
175
- </Placeholder>
170
+ {[...Array(2)].map((item, i) => (
171
+ <Placeholder key={i} style={{ marginBottom: 20 }} Animation={Fade}>
172
+ <PlaceholderLine height={40} style={{ flex: 1, marginTop: 10 }} />
173
+ {[...Array(3)].map((item, i) => (
174
+ <View key={i} style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
175
+ <PlaceholderLine height={30} width={10} style={{ marginBottom: 20 }} />
176
+ <PlaceholderLine height={30} width={50} style={{ marginBottom: 20 }} />
177
+ <PlaceholderLine height={30} width={30} style={{ marginBottom: 20 }} />
178
+ </View>
179
+ ))}
180
+ </Placeholder>
176
181
  ))}
177
182
  </>
178
183
  ) : (
@@ -221,7 +226,7 @@ export const ProductOptionsUI = (props: any) => {
221
226
  state={currentState}
222
227
  disabled={isSoldOut || maxProductQuantity <= 0}
223
228
  />
224
- ): null
229
+ ) : null
225
230
  })
226
231
  }
227
232
  </WrapperSubOption>
@@ -383,6 +388,9 @@ const styles = StyleSheet.create({
383
388
  textDecorationLine: 'line-through',
384
389
  marginLeft: 7,
385
390
  marginRight: 7
391
+ },
392
+ caloriesStyle: {
393
+ color: '#808080'
386
394
  }
387
395
  })
388
396
 
package/themes/original/src/components/BusinessPreorder/index.tsx CHANGED
@@ -82,7 +82,7 @@ const BusinessPreorderUI = (props: BusinessPreorderParams) => {
82
82
  paddingBottom: 15,
83
83
  borderBottomWidth: 1,
84
84
  borderColor: theme.colors.backgroundGray200,
85
- height: 90
85
+ height: 100
86
86
  },
87
87
  calendarHeaderContainer: {
88
88
  flex: 1,
@@ -400,6 +400,7 @@ const BusinessPreorderUI = (props: BusinessPreorderParams) => {
400
400
  iconStyle={{borderWidth: 1}}
401
401
  selectedDate={selectDate}
402
402
  datesWhitelist={datesWhitelist}
403
+ dayContainerStyle={{height: 40}}
403
404
  disabledDateNameStyle={styles.disabledDateName}
404
405
  disabledDateNumberStyle={styles.disabledDateNumber}
405
406
  disabledDateOpacity={0.6}
package/themes/original/src/components/BusinessProductsList/index.tsx CHANGED
@@ -49,7 +49,7 @@ const BusinessProductsListUI = (props: BusinessProductsListParams) => {
49
49
  product={product}
50
50
  businessId={businessId}
51
51
  onProductClick={() => onProductClick(product)}
52
- productAddedToCart={currentCart?.products?.find((Cproduct: any) => Cproduct.id === product.id)}
52
+ productAddedToCartLength={currentCart?.products?.reduce((productsLength: number, Cproduct: any) => { return productsLength + (Cproduct?.id === product?.id ? Cproduct?.quantity : 0) }, 0)}
53
53
  />
54
54
  ))}
55
55
 
@@ -72,7 +72,7 @@ const BusinessProductsListUI = (props: BusinessProductsListParams) => {
72
72
  product={product}
73
73
  businessId={businessId}
74
74
  onProductClick={onProductClick}
75
- productAddedToCart={currentCart?.products?.find((Cproduct: any) => Cproduct.id === product.id)}
75
+ productAddedToCartLength={currentCart?.products?.reduce((productsLength: number, Cproduct: any) => { return productsLength + (Cproduct?.id === product?.id ? Cproduct?.quantity : 0) }, 0)}
76
76
  />
77
77
  ),
78
78
  )}
@@ -117,7 +117,7 @@ const BusinessProductsListUI = (props: BusinessProductsListParams) => {
117
117
  businessId={businessId}
118
118
  product={product}
119
119
  onProductClick={onProductClick}
120
- productAddedToCart={currentCart?.products?.find((Cproduct: any) => Cproduct.id === product.id)}
120
+ productAddedToCartLength={currentCart?.products?.reduce((productsLength: number, Cproduct: any) => { return productsLength + (Cproduct?.id === product?.id ? Cproduct?.quantity : 0) }, 0)}
121
121
  />
122
122
  ))}
123
123
  </>
package/themes/original/src/components/DriverTips/index.tsx CHANGED
@@ -44,7 +44,7 @@ const DriverTipsUI = (props: any) => {
44
44
  borderWidth: 1,
45
45
  borderColor: theme.colors.inputDisabled,
46
46
  marginRight: 10,
47
- height: 44
47
+ height: 50
48
48
  }
49
49
  })
50
50
 
@@ -63,7 +63,7 @@ const DriverTipsUI = (props: any) => {
63
63
  return (
64
64
  <DTContainer>
65
65
  <DTWrapperTips>
66
- {driverTipsOptions.map((option: any, i: number) => (
66
+ {driverTipsOptions.map((option: any, i: number) => (
67
67
  <TouchableOpacity
68
68
  key={i}
69
69
  onPress={() => handlerChangeOption(option)}
@@ -72,7 +72,7 @@ const DriverTipsUI = (props: any) => {
72
72
  style={style.circle}
73
73
  isActive={option === optionSelected}
74
74
  >
75
- <OText size={13} color={option === optionSelected ? '#FFF' : theme.colors.textSecondary}>
75
+ <OText size={12} numberOfLines={1} color={option === optionSelected ? '#FFF' : theme.colors.textSecondary}>
76
76
  {`${isFixedPrice ? parsePrice(option) : `${option}%`}`}
77
77
  </OText>
78
78
  </DTCard>
package/themes/original/src/components/DriverTips/styles.tsx CHANGED
@@ -15,7 +15,7 @@ export const DTWrapperTips = styled.View`
15
15
  width: 100%;
16
16
  justify-content: space-evenly;
17
17
  align-items: center;
18
- flex-wrap: nowrap;
18
+ flex-wrap: wrap;
19
19
  `
20
20
 
21
21
  export const DTCard = styled.View`
@@ -24,10 +24,10 @@ export const DTCard = styled.View`
24
24
  align-items: center;
25
25
  border: 1px solid ${(props: any) => props.isActive ? props.theme.colors.primary : props.theme.colors.border};
26
26
  text-transform: capitalize;
27
- min-height: 48px;
28
- min-width: 48px;
29
- max-width: 48px;
30
- max-height: 48px;
27
+ min-height: 55px;
28
+ min-width: 55px;
29
+ max-width: 55px;
30
+ max-height: 55px;
31
31
  margin-right: 10px;
32
32
  margin-left: 10px;
33
33
  margin-top: 10px;
package/themes/original/src/components/ProductForm/index.tsx CHANGED
@@ -31,7 +31,9 @@ import {
31
31
  WrapperSubOption,
32
32
  ProductComment,
33
33
  ProductActions,
34
- ExtraOptionWrap
34
+ ExtraOptionWrap,
35
+ WeightUnitSwitch,
36
+ WeightUnitItem
35
37
  } from './styles';
36
38
  import { OButton, OIcon, OInput, OText } from '../shared';
37
39
  import { ScrollView } from 'react-native-gesture-handler';
@@ -130,6 +132,9 @@ export const ProductOptionsUI = (props: any) => {
130
132
  height: 32,
131
133
  borderRadius: 16,
132
134
  backgroundColor: 'rgba(208,208,208,0.5)'
135
+ },
136
+ unitItem: {
137
+ fontSize: 12
133
138
  }
134
139
  });
135
140
 
@@ -144,6 +149,12 @@ export const ProductOptionsUI = (props: any) => {
144
149
  const { top, bottom } = useSafeAreaInsets();
145
150
  const { height } = useWindowDimensions();
146
151
  const [selOpt, setSelectedOpt] = useState(0);
152
+ const [isHaveWeight, setIsHaveWeight] = useState(false)
153
+ const [qtyBy, setQtyBy] = useState({
154
+ weight_unit: false,
155
+ pieces: true
156
+ })
157
+ const [pricePerWeightUnit, setPricePerWeightUnit] = useState(null)
147
158
 
148
159
  const swiperRef: any = useRef(null)
149
160
 
@@ -199,6 +210,10 @@ export const ProductOptionsUI = (props: any) => {
199
210
  navigation.navigate('Login');
200
211
  };
201
212
 
213
+ const handleSwitchQtyUnit = (val: string) => {
214
+ setQtyBy({ [val]: true, [!val]: false })
215
+ }
216
+
202
217
  useEffect(() => {
203
218
  const productImgList: any = []
204
219
  product?.images && productImgList.push(product.images)
@@ -208,6 +223,11 @@ export const ProductOptionsUI = (props: any) => {
208
223
  }
209
224
  }
210
225
  setGallery(productImgList)
226
+
227
+ if (product?.weight && product?.weight_unit) {
228
+ setIsHaveWeight(true)
229
+ setPricePerWeightUnit(product?.price / product?.weight)
230
+ }
211
231
  }, [product])
212
232
 
213
233
  const saveErrors =
@@ -390,13 +410,19 @@ export const ProductOptionsUI = (props: any) => {
390
410
  </Placeholder>
391
411
  ) : (
392
412
  <>
393
- <OText
394
- size={20}
395
- lineHeight={30}
396
- weight={'600'}
397
- style={{ flex: 1, marginBottom: 5 }}>
398
- {product?.name || productCart.name}
399
- </OText>
413
+ <View style={{ flexDirection: 'row' }}>
414
+ <OText
415
+ size={20}
416
+ lineHeight={30}
417
+ weight={'600'}
418
+ style={{ flex: 1, marginBottom: 10 }}>
419
+ {product?.name || productCart.name}
420
+ </OText>
421
+ {product?.calories && (
422
+ <OText size={16} style={{ color: '#808080' }}>{product?.calories} cal
423
+ </OText>
424
+ )}
425
+ </View>
400
426
  {((product?.sku && product?.sku !== '-1' && product?.sku !== '1') || (product?.estimated_person)) && (
401
427
  <OText size={14} style={{ flex: I18nManager.isRTL ? 1 : 0 }} color={'#909BA9'} mBottom={7}>
402
428
  {
@@ -411,9 +437,22 @@ export const ProductOptionsUI = (props: any) => {
411
437
  }
412
438
  </OText>
413
439
  )}
414
- <OText size={16} lineHeight={24} color={theme.colors.textNormal}>
415
- {productCart.price ? parsePrice(productCart.price) : ''}
416
- </OText>
440
+ {isHaveWeight ? (
441
+ <OText size={16} lineHeight={24} color={theme.colors.primary}>{parsePrice(pricePerWeightUnit)} / {product?.weight_unit}</OText>
442
+ ) : (
443
+ <View style={{ flexDirection: 'row', marginBottom: 10 }}>
444
+ <OText size={16} style={{ flex: I18nManager.isRTL ? 1 : 0 }} color={theme.colors.primary}>{productCart.price ? parsePrice(productCart.price) : ''}</OText>
445
+ {product?.offer_price && (
446
+ <OText style={{
447
+ fontSize: 14,
448
+ color: '#808080',
449
+ textDecorationLine: 'line-through',
450
+ marginLeft: 7,
451
+ marginRight: 7
452
+ }}>{parsePrice(product?.offer_price)}</OText>
453
+ )}
454
+ </View>
455
+ )}
417
456
  </>
418
457
  )}
419
458
  </ProductTitle>
@@ -721,8 +760,10 @@ export const ProductOptionsUI = (props: any) => {
721
760
  <OText
722
761
  size={12}
723
762
  lineHeight={18}
724
- style={{ minWidth: 29, textAlign: 'center' }}>
725
- {productCart.quantity}
763
+ style={{ minWidth: 29, textAlign: 'center' }}
764
+ >
765
+ {qtyBy?.pieces && productCart.quantity}
766
+ {qtyBy?.weight_unit && productCart.quantity * product?.weight}
726
767
  </OText>
727
768
  <TouchableOpacity
728
769
  onPress={increment}
@@ -743,6 +784,36 @@ export const ProductOptionsUI = (props: any) => {
743
784
  }
744
785
  />
745
786
  </TouchableOpacity>
787
+ <WeightUnitSwitch>
788
+ <TouchableOpacity
789
+ onPress={() => handleSwitchQtyUnit('pieces')}
790
+ >
791
+ <WeightUnitItem active={qtyBy?.pieces}>
792
+ <OText
793
+ size={12}
794
+ lineHeight={18}
795
+ color={qtyBy?.pieces ? theme.colors.primary : theme.colors.textNormal}
796
+ >
797
+ {t('PIECES', 'pieces')}
798
+ </OText>
799
+ </WeightUnitItem>
800
+ </TouchableOpacity>
801
+ <View style={{ alignItems: 'flex-start' }}>
802
+ <TouchableOpacity
803
+ onPress={() => handleSwitchQtyUnit('weight_unit')}
804
+ >
805
+ <WeightUnitItem active={qtyBy?.weight_unit}>
806
+ <OText
807
+ size={12}
808
+ lineHeight={18}
809
+ color={qtyBy?.weight_unit ? theme.colors.primary : theme.colors.textNormal}
810
+ >
811
+ {product?.weight_unit}
812
+ </OText>
813
+ </WeightUnitItem>
814
+ </TouchableOpacity>
815
+ </View>
816
+ </WeightUnitSwitch>
746
817
  </View>
747
818
  )}
748
819
  <View
package/themes/original/src/components/ProductForm/styles.tsx CHANGED
@@ -78,3 +78,15 @@ export const ProductActions = styled.View`
78
78
  export const ExtraOptionWrap = styled.ScrollView`
79
79
  margin-horizontal: -40px;
80
80
  `;
81
+
82
+ export const WeightUnitSwitch = styled.View`
83
+ margin-left: 10px;
84
+ `
85
+ export const WeightUnitItem = styled.View`
86
+ padding: 1px 5px;
87
+ border-radius: 4px;
88
+
89
+ ${({ active }: any) => active && css`
90
+ background-color: ${(props: any) => props.theme.colors.primary}20;
91
+ `}
92
+ `
package/themes/original/src/components/ProductItemAccordion/index.tsx CHANGED
@@ -212,8 +212,8 @@ export const ProductItemAccordion = (props: ProductItemAccordionParams) => {
212
212
  </View>
213
213
  {((isCartProduct && !isCartPending && product?.valid_menu && !product?.valid_quantity) ||
214
214
  (!product?.valid_menu && isCartProduct && !isCartPending)) && (
215
- <View style={{ alignItems: 'flex-end', width: '100%' }}>
216
- <OText size={14} color={theme.colors.red} style={{ textAlign: 'right', bottom: 20 }}>
215
+ <View style={{ alignItems: 'flex-end', width: '100%', }}>
216
+ <OText size={14} color={theme.colors.red} style={{ textAlign: 'right', marginTop: 5 }}>
217
217
  {t('NOT_AVAILABLE', 'Not available')}
218
218
  </OText>
219
219
  </View>
package/themes/original/src/components/SingleProductCard/index.tsx CHANGED
@@ -13,7 +13,7 @@ import { OText, OIcon } from '../shared';
13
13
  import FastImage from 'react-native-fast-image'
14
14
 
15
15
  export const SingleProductCard = (props: SingleProductCardParams) => {
16
- const { businessId, product, isSoldOut, onProductClick, productAddedToCart } = props;
16
+ const { businessId, product, isSoldOut, onProductClick, productAddedToCartLength } = props;
17
17
 
18
18
  const theme = useTheme();
19
19
 
@@ -90,7 +90,6 @@ export const SingleProductCard = (props: SingleProductCardParams) => {
90
90
  maxCartProductConfig,
91
91
  maxCartProductInventory,
92
92
  );
93
-
94
93
  return (
95
94
  <CardContainer
96
95
  style={[
@@ -98,11 +97,11 @@ export const SingleProductCard = (props: SingleProductCardParams) => {
98
97
  (isSoldOut || maxProductQuantity <= 0) && styles.soldOutBackgroundStyle,
99
98
  ]}
100
99
  onPress={() => onProductClick?.(product)}>
101
- {productAddedToCart && productAddedToCart?.quantity > 0 && (
100
+ {productAddedToCartLength > 0 && (
102
101
  <QuantityContainer style={[styles.quantityContainer, {
103
102
  transform: [{ translateX: 10 }, { translateY: -10 }],
104
103
  }]}>
105
- <OText color={theme.colors.white}>{productAddedToCart?.quantity}</OText>
104
+ <OText size={12} color={theme.colors.white}>{productAddedToCartLength.toString()}</OText>
106
105
  </QuantityContainer>
107
106
  )}
108
107
  <CardInfo>
package/themes/original/src/components/SingleProductCard/styles.tsx CHANGED
@@ -24,4 +24,6 @@ export const SoldOut = styled.View`
24
24
 
25
25
  export const QuantityContainer = styled.View`
26
26
  background: ${({ theme } : any) => theme.colors.primary};
27
- `
27
+ align-items: center;
28
+ justify-content: center;
29
+ `
package/themes/original/src/types/index.tsx CHANGED
@@ -221,7 +221,7 @@ export interface SingleProductCardParams {
221
221
  product: any;
222
222
  isSoldOut: boolean;
223
223
  onProductClick: any;
224
- productAddedToCart?: any
224
+ productAddedToCartLength: number
225
225
  }
226
226
  export interface BusinessInformationParams {
227
227
  navigation?: any,