ordering-ui-react-native 0.12.90 → 0.12.94

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 (7) hide show
  1. package/package.json +2 -1
  2. package/src/components/NotFoundSource/index.tsx +4 -3
  3. package/src/components/ShareComponent/index.tsx +1 -1
  4. package/themes/business/src/components/NotFoundSource/index.tsx +3 -3
  5. package/themes/business/src/types/index.tsx +1 -0
  6. package/themes/original/src/components/MomentOption/index.tsx +51 -46
  7. package/themes/single-business/src/components/ProductForm/index.tsx +75 -72
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "ordering-ui-react-native",
3
- "version": "0.12.90",
3
+ "version": "0.12.94",
4
4
  "description": "Reusable components made in react native",
5
5
  "main": "src/index.tsx",
6
6
  "author": "ordering.inc",
@@ -98,6 +98,7 @@
98
98
  "react-native-restart": "^0.0.22",
99
99
  "react-native-safe-area-context": "^3.1.8",
100
100
  "react-native-screens": "^2.11.0",
101
+ "react-native-select-dropdown": "^1.7.0",
101
102
  "react-native-signature-canvas": "^4.3.0",
102
103
  "react-native-snap-carousel": "^3.9.1",
103
104
  "react-native-sound": "^0.11.1",
package/src/components/NotFoundSource/index.tsx CHANGED
@@ -15,7 +15,8 @@ export const NotFoundSource = (props: NotFoundSourceParams) => {
15
15
  content,
16
16
  btnTitle,
17
17
  conditioned,
18
- onClickButton
18
+ onClickButton,
19
+ textSize
19
20
  } = props
20
21
 
21
22
  const theme = useTheme()
@@ -33,8 +34,8 @@ export const NotFoundSource = (props: NotFoundSourceParams) => {
33
34
  />
34
35
  </NotFoundImage>
35
36
  )}
36
- {content && conditioned && !errorImage && <OText color={theme.colors.disabled} size={18} style={{textAlign: 'center'}}>{content}</OText>}
37
- {content && !conditioned && <OText color={theme.colors.disabled} size={18} style={{textAlign: 'center'}}>{content}</OText>}
37
+ {content && conditioned && !errorImage && <OText color={theme.colors.disabled} size={textSize ?? 18} style={{textAlign: 'center'}}>{content}</OText>}
38
+ {content && !conditioned && <OText color={theme.colors.disabled} size={textSize ?? 18} style={{textAlign: 'center'}}>{content}</OText>}
38
39
  {!onClickButton && props.children && (
39
40
  props.children
40
41
  )}
package/src/components/ShareComponent/index.tsx CHANGED
@@ -9,7 +9,7 @@ export const ShareComponent = (props : ShareComponentParams) => {
9
9
  const {orderId, hashkey} = props
10
10
  const [ ,t] = useLanguage()
11
11
  const {showToast} = useToast()
12
- const url = `https://reactdemo.ordering.co/orders/${orderId}?=${hashkey}`
12
+ const url = `${t('SHARE_URL', 'https://reactdemo.tryordering.com/')}orders/${orderId}?=${hashkey}`
13
13
  const onShare = async () => {
14
14
  try {
15
15
  const result = await Share.share({
package/themes/business/src/components/NotFoundSource/index.tsx CHANGED
@@ -6,7 +6,7 @@ import { useTheme } from 'styled-components/native';
6
6
  import { NotFound, NotFoundImage } from './styles';
7
7
 
8
8
  export const NotFoundSource = (props: NotFoundSourceParams) => {
9
- const { image, content, btnTitle, conditioned, onClickButton } = props;
9
+ const { image, content, btnTitle, conditioned, onClickButton, textSize } = props;
10
10
  const theme = useTheme();
11
11
 
12
12
  const errorImage = image || theme.images.general.notFound;
@@ -21,7 +21,7 @@ export const NotFoundSource = (props: NotFoundSourceParams) => {
21
21
  {content && conditioned && !errorImage && (
22
22
  <OText
23
23
  color={theme.colors.textSecondary}
24
- size={18}
24
+ size={textSize ?? 18}
25
25
  style={{ textAlign: 'center' }}>
26
26
  {content}
27
27
  </OText>
@@ -29,7 +29,7 @@ export const NotFoundSource = (props: NotFoundSourceParams) => {
29
29
  {content && !conditioned && (
30
30
  <OText
31
31
  color={theme.colors.textSecondary}
32
- size={18}
32
+ size={textSize ?? 18}
33
33
  style={{ textAlign: 'center' }}>
34
34
  {content}
35
35
  </OText>
package/themes/business/src/types/index.tsx CHANGED
@@ -232,6 +232,7 @@ export interface NotFoundSourceParams {
232
232
  conditioned?: boolean;
233
233
  onClickButton?: any;
234
234
  children?: any;
235
+ textSize?: number;
235
236
  }
236
237
  export interface MessagesOptionParams {
237
238
  orders?: any;
package/themes/original/src/components/MomentOption/index.tsx CHANGED
@@ -32,6 +32,8 @@ import {
32
32
  import CalendarPicker from 'react-native-calendar-picker';
33
33
  import { TouchableRipple } from 'react-native-paper';
34
34
  import { useSafeAreaInsets } from 'react-native-safe-area-context';
35
+ import FontAwesomeIcon from 'react-native-vector-icons/FontAwesome';
36
+ import SelectDropdown from 'react-native-select-dropdown';
35
37
 
36
38
  const MomentOptionUI = (props: MomentOptionParams) => {
37
39
  const {
@@ -171,7 +173,6 @@ const MomentOptionUI = (props: MomentOptionParams) => {
171
173
  },
172
174
  };
173
175
  };
174
-
175
176
  return (
176
177
  <>
177
178
  <Container style={{ paddingLeft: 40, paddingRight: 40 }}>
@@ -229,8 +230,56 @@ const MomentOptionUI = (props: MomentOptionParams) => {
229
230
  {datesList.length > 0 && (
230
231
  <View style={styles.dateWrap}>
231
232
  <View style={styles.dateLabel}>
232
- <OText size={12} color={theme.colors.disabled}>{dateSelected}</OText>
233
+ <OText size={12} color={theme.colors.textNormal}>{dateSelected}</OText>
233
234
  </View>
235
+ <SelectDropdown
236
+ defaultButtonText={timeSelected ? timeSelected : t('DELIVERY_TIME', 'Delivery Time')}
237
+ defaultValue={74}
238
+ data={hoursList}
239
+ disabled={orderState.loading}
240
+ onSelect={(selectedItem, index) => {
241
+ setSelectedTime(selectedItem.startTime)
242
+ }}
243
+ buttonTextAfterSelection={(selectedItem, index) => {
244
+ return `${selectedItem.startTime} - ${selectedItem.endTime}`
245
+ }}
246
+ rowTextForSelection={(item, index) => {
247
+ return `${item.startTime} - ${item.endTime}`
248
+ }}
249
+ buttonStyle={{
250
+ backgroundColor: theme.colors.white,
251
+ borderColor: theme.colors.border,
252
+ borderWidth: 1,
253
+ borderRadius: 8,
254
+ height: 40,
255
+ width: '100%',
256
+ flexDirection: 'column',
257
+ alignItems: 'flex-start',
258
+ marginBottom: 20
259
+ }}
260
+ buttonTextStyle={{
261
+ color: theme.colors.textNormal,
262
+ fontSize: 12,
263
+ paddingTop: 10
264
+ }}
265
+ dropdownStyle={{
266
+ borderRadius: 8,
267
+ borderColor: theme.colors.lightGray,
268
+ }}
269
+ rowStyle={{
270
+ borderBottomColor: theme.colors.white,
271
+ backgroundColor: theme.colors.white,
272
+ height: 40,
273
+ flexDirection: 'column',
274
+ alignItems: 'flex-start',
275
+ paddingTop: 8,
276
+ paddingLeft: 22
277
+ }}
278
+ rowTextStyle={{
279
+ color: theme.colors.textNormal,
280
+ fontSize: 14,
281
+ }}
282
+ />
234
283
  <CalendarPicker
235
284
  nextTitle=">"
236
285
  width={width - 80}
@@ -264,50 +313,6 @@ const MomentOptionUI = (props: MomentOptionParams) => {
264
313
  />
265
314
  </View>
266
315
  )}
267
-
268
- {hoursList.length > 0 && optionSelected.isSchedule && (
269
- <>
270
- <TouchableRipple style={styles.timeLabel} onPress={() => { setToggleTime(!toggleTime) }}>
271
- <>
272
- <OIcon src={theme.images.general.clock} width={16} />
273
- <OText style={{ flexGrow: 1, paddingHorizontal: 12 }} color={theme.colors.disabled}>{timeSelected ? timeSelected : t('DELIVERY_TIME', 'Delivery Time')}</OText>
274
- <OIcon src={theme.images.general.arrow_down} width={16} style={{ transform: [{ rotate: toggleTime ? '180deg' : '0deg' }] }} />
275
- </>
276
- </TouchableRipple>
277
- {toggleTime ? (
278
-
279
- <WrapHours nestedScrollEnabled={true}>
280
- <Hours name="hours">
281
- {hoursList.map((hour: any, i: any) => (
282
- <Hour
283
- key={i}
284
- onPress={() => setSelectedTime(hour.startTime)}
285
- disabled={orderState.loading}
286
- style={{ borderColor: selectedTime === hour.startTime ? theme.colors.primary : theme.colors.border }}
287
- >
288
- <OText
289
- color={
290
- selectedTime === hour.startTime
291
- ? theme.colors.primary
292
- : theme.colors.textSecondary
293
- }>
294
- {configs?.format_time?.value === '12'
295
- ? hour.startTime.includes('12')
296
- ? `${hour.startTime}PM`
297
- : parseTime(moment(hour.startTime, 'HH:mm'), {
298
- outputFormat: 'hh:mma',
299
- })
300
- : parseTime(moment(hour.startTime, 'HH:mm'), {
301
- outputFormat: 'HH:mm',
302
- })}
303
- </OText>
304
- </Hour>
305
- ))}
306
- </Hours>
307
- </WrapHours>
308
- ) : null}
309
- </>
310
- )}
311
316
  </WrapDelveryTime>
312
317
  )}
313
318
  </View>
package/themes/single-business/src/components/ProductForm/index.tsx CHANGED
@@ -567,86 +567,87 @@ export const ProductOptionsUI = (props: any) => {
567
567
 
568
568
  {!loading && !error && product && (
569
569
  <ProductActions>
570
- <OText size={16} lineHeight={24} weight={'600'}>
571
- {productCart.total ? parsePrice(productCart?.total) : ''}
572
- </OText>
573
570
  {productCart && !isSoldOut && maxProductQuantity > 0 && (
574
- <View style={styles.quantityControl}>
575
- <TouchableOpacity
576
- onPress={decrement}
577
- disabled={productCart.quantity === 1 || isSoldOut}>
578
- <OIcon
579
- src={theme.images.general.minus}
580
- width={16}
581
- color={
582
- productCart.quantity === 1 || isSoldOut
583
- ? theme.colors.backgroundGray
584
- : theme.colors.backgroundDark
585
- }
586
- />
587
- </TouchableOpacity>
588
- <OText
589
- size={12}
590
- lineHeight={18}
591
- style={{ minWidth: 29, textAlign: 'center' }}>
592
- {productCart.quantity}
571
+ <>
572
+ <OText size={16} lineHeight={24} weight={'600'}>
573
+ {productCart.total ? parsePrice(productCart?.total) : ''}
593
574
  </OText>
594
- <TouchableOpacity
595
- onPress={increment}
596
- disabled={
597
- maxProductQuantity <= 0 ||
598
- productCart.quantity >= maxProductQuantity ||
599
- isSoldOut
600
- }>
601
- <OIcon
602
- src={theme.images.general.plus}
603
- width={16}
604
- color={
575
+ <View style={styles.quantityControl}>
576
+ <TouchableOpacity
577
+ onPress={decrement}
578
+ disabled={productCart.quantity === 1 || isSoldOut}>
579
+ <OIcon
580
+ src={theme.images.general.minus}
581
+ width={16}
582
+ color={
583
+ productCart.quantity === 1 || isSoldOut
584
+ ? theme.colors.backgroundGray
585
+ : theme.colors.backgroundDark
586
+ }
587
+ />
588
+ </TouchableOpacity>
589
+ <OText
590
+ size={12}
591
+ lineHeight={18}
592
+ style={{ minWidth: 29, textAlign: 'center' }}>
593
+ {productCart.quantity}
594
+ </OText>
595
+ <TouchableOpacity
596
+ onPress={increment}
597
+ disabled={
605
598
  maxProductQuantity <= 0 ||
606
- productCart.quantity >= maxProductQuantity ||
607
- isSoldOut
608
- ? theme.colors.backgroundGray
609
- : theme.colors.backgroundDark
610
- }
611
- />
612
- </TouchableOpacity>
613
- </View>
599
+ productCart.quantity >= maxProductQuantity ||
600
+ isSoldOut
601
+ }>
602
+ <OIcon
603
+ src={theme.images.general.plus}
604
+ width={16}
605
+ color={
606
+ maxProductQuantity <= 0 ||
607
+ productCart.quantity >= maxProductQuantity ||
608
+ isSoldOut
609
+ ? theme.colors.backgroundGray
610
+ : theme.colors.backgroundDark
611
+ }
612
+ />
613
+ </TouchableOpacity>
614
+ </View>
615
+ </>
614
616
  )}
615
617
  <View
616
- style={{
617
- width: isSoldOut || maxProductQuantity <= 0 ? '100%' : '40%',
618
- }}>
618
+ style={{ width: isSoldOut || maxProductQuantity <= 0 ? '100%' : '40%'}}
619
+ >
619
620
  {productCart &&
620
621
  !isSoldOut &&
621
622
  maxProductQuantity > 0 &&
622
623
  auth &&
623
- orderState.options?.address_id && (
624
- <OButton
625
- onClick={() => handleSaveProduct()}
626
- imgRightSrc=""
627
- text={`${orderState.loading
628
- ? t('LOADING', 'Loading')
629
- : editMode
630
- ? t('UPDATE', 'Update')
631
- : t('ADD', 'Add')
632
- }`}
633
- textStyle={{
634
- color: saveErrors ? theme.colors.primary : theme.colors.white,
635
- }}
636
- style={{
637
- backgroundColor: saveErrors ? theme.colors.white : theme.colors.primary,
638
- borderColor: saveErrors ? theme.colors.white : theme.colors.primary,
639
- opacity: saveErrors ? 0.3 : 1,
640
- borderRadius: 7.6,
641
- height: 44,
642
- shadowOpacity: 0,
643
- borderWidth: 1,
644
- }}
645
- />
646
- )}
647
- {auth &&
648
- !orderState.options?.address_id &&
649
- (orderState.loading ? (
624
+ orderState.options?.address_id &&
625
+ (
626
+ <OButton
627
+ onClick={() => handleSaveProduct()}
628
+ imgRightSrc=""
629
+ text={`${orderState.loading
630
+ ? t('LOADING', 'Loading')
631
+ : editMode
632
+ ? t('UPDATE', 'Update')
633
+ : t('ADD', 'Add')
634
+ }`}
635
+ textStyle={{
636
+ color: saveErrors ? theme.colors.primary : theme.colors.white,
637
+ }}
638
+ style={{
639
+ backgroundColor: saveErrors ? theme.colors.white : theme.colors.primary,
640
+ borderColor: saveErrors ? theme.colors.white : theme.colors.primary,
641
+ opacity: saveErrors ? 0.3 : 1,
642
+ borderRadius: 7.6,
643
+ height: 44,
644
+ shadowOpacity: 0,
645
+ borderWidth: 1,
646
+ }}
647
+ />
648
+ )}
649
+ {auth && !orderState.options?.address_id &&(
650
+ orderState.loading ? (
650
651
  <OButton
651
652
  isDisabled
652
653
  text={t('LOADING', 'Loading')}
@@ -654,7 +655,8 @@ export const ProductOptionsUI = (props: any) => {
654
655
  />
655
656
  ) : (
656
657
  <OButton onClick={navigation.navigate('AddressList')} />
657
- ))}
658
+ ))
659
+ }
658
660
  {(!auth || isSoldOut || maxProductQuantity <= 0) && (
659
661
  <OButton
660
662
  isDisabled={isSoldOut || maxProductQuantity <= 0}
@@ -669,6 +671,7 @@ export const ProductOptionsUI = (props: any) => {
669
671
  style={{
670
672
  borderColor: theme.colors.primary,
671
673
  backgroundColor: theme.colors.white,
674
+ borderRadius: 8
672
675
  }}
673
676
  />
674
677
  )}