ordering-ui-react-native 0.15.37 → 0.15.38-test

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 (79) hide show
  1. package/package.json +3 -2
  2. package/src/components/BusinessTypeFilter/index.tsx +4 -1
  3. package/src/components/LanguageSelector/index.tsx +1 -0
  4. package/src/components/OrderDetails/index.tsx +2 -2
  5. package/src/components/PaymentOptions/index.tsx +2 -2
  6. package/src/components/StripeMethodForm/index.tsx +22 -21
  7. package/src/pages/BusinessProductsList.tsx +1 -0
  8. package/src/pages/BusinessesListing.tsx +1 -1
  9. package/themes/business/src/components/Home/index.tsx +128 -55
  10. package/themes/business/src/components/Home/styles.tsx +8 -1
  11. package/themes/business/src/components/NewOrderNotification/index.tsx +59 -98
  12. package/themes/business/src/components/OrderDetails/Delivery.tsx +9 -9
  13. package/themes/business/src/components/OrderDetails/OrderContentComponent.tsx +152 -91
  14. package/themes/business/src/components/OrderDetails/styles.tsx +7 -0
  15. package/themes/business/src/components/OrdersListManager/index.tsx +51 -48
  16. package/themes/business/src/components/OrdersOption/index.tsx +52 -48
  17. package/themes/business/src/components/PreviousOrders/index.tsx +50 -14
  18. package/themes/kiosk/src/components/Cart/index.tsx +99 -25
  19. package/themes/kiosk/src/components/Cart/styles.tsx +6 -0
  20. package/themes/kiosk/src/components/OrderDetails/index.tsx +134 -39
  21. package/themes/kiosk/src/components/OrderDetails/styles.tsx +5 -0
  22. package/themes/kiosk/src/components/ProductForm/index.tsx +2 -2
  23. package/themes/kiosk/src/types/index.d.ts +2 -0
  24. package/themes/original/index.tsx +165 -0
  25. package/themes/original/src/components/AddressForm/index.tsx +15 -10
  26. package/themes/original/src/components/AddressList/index.tsx +28 -2
  27. package/themes/original/src/components/AppleLogin/index.tsx +118 -77
  28. package/themes/original/src/components/BusinessBasicInformation/index.tsx +96 -45
  29. package/themes/original/src/components/BusinessBasicInformation/styles.tsx +28 -1
  30. package/themes/original/src/components/BusinessController/index.tsx +28 -9
  31. package/themes/original/src/components/BusinessController/styles.tsx +22 -0
  32. package/themes/original/src/components/BusinessFeaturedController/index.tsx +20 -1
  33. package/themes/original/src/components/BusinessFeaturedController/styles.tsx +23 -0
  34. package/themes/original/src/components/BusinessListingSearch/index.tsx +4 -0
  35. package/themes/original/src/components/BusinessMenuList/index.tsx +11 -4
  36. package/themes/original/src/components/BusinessPreorder/index.tsx +141 -121
  37. package/themes/original/src/components/BusinessProductsCategories/index.tsx +7 -5
  38. package/themes/original/src/components/BusinessProductsList/index.tsx +126 -21
  39. package/themes/original/src/components/BusinessProductsList/styles.tsx +32 -2
  40. package/themes/original/src/components/BusinessProductsListing/index.tsx +12 -5
  41. package/themes/original/src/components/BusinessReviews/index.tsx +4 -25
  42. package/themes/original/src/components/BusinessesListing/index.tsx +1 -2
  43. package/themes/original/src/components/Cart/index.tsx +1 -3
  44. package/themes/original/src/components/CartContent/index.tsx +2 -2
  45. package/themes/original/src/components/Checkout/index.tsx +2 -1
  46. package/themes/original/src/components/Home/index.tsx +1 -1
  47. package/themes/original/src/components/LoginForm/index.tsx +73 -2
  48. package/themes/original/src/components/LoginForm/styles.tsx +6 -1
  49. package/themes/original/src/components/LogoutButton/index.tsx +7 -1
  50. package/themes/original/src/components/Messages/index.tsx +5 -0
  51. package/themes/original/src/components/Messages/styles.tsx +1 -3
  52. package/themes/original/src/components/MomentOption/index.tsx +10 -1
  53. package/themes/original/src/components/MomentOption/styles.tsx +1 -1
  54. package/themes/original/src/components/OrderDetails/index.tsx +1 -3
  55. package/themes/original/src/components/OrderProgress/index.tsx +3 -3
  56. package/themes/original/src/components/OrderProgress/styles.tsx +1 -0
  57. package/themes/original/src/components/OrderSummary/index.tsx +2 -2
  58. package/themes/original/src/components/PaymentOptionWallet/index.tsx +6 -2
  59. package/themes/original/src/components/PaymentOptions/index.tsx +3 -1
  60. package/themes/original/src/components/PhoneInputNumber/index.tsx +10 -4
  61. package/themes/original/src/components/PreviousOrders/index.tsx +14 -12
  62. package/themes/original/src/components/ProductForm/index.tsx +4 -4
  63. package/themes/original/src/components/Promotions/index.tsx +232 -0
  64. package/themes/original/src/components/Promotions/styles.tsx +80 -0
  65. package/themes/original/src/components/SignupForm/index.tsx +109 -13
  66. package/themes/original/src/components/SingleProductCard/index.tsx +39 -18
  67. package/themes/original/src/components/SingleProductCard/styles.tsx +28 -1
  68. package/themes/original/src/components/TaxInformation/index.tsx +10 -4
  69. package/themes/original/src/components/UserFormDetails/index.tsx +13 -2
  70. package/themes/original/src/components/UserProfile/index.tsx +53 -8
  71. package/themes/original/src/components/Wallets/index.tsx +57 -3
  72. package/themes/original/src/components/Wallets/styles.tsx +21 -0
  73. package/themes/original/src/components/shared/HeaderTitle.tsx +21 -0
  74. package/themes/original/src/components/shared/index.tsx +2 -0
  75. package/themes/original/src/config/constants.tsx +6 -6
  76. package/themes/original/src/types/index.tsx +21 -1
  77. package/themes/original/src/utils/index.tsx +9 -0
  78. package/themes/single-business/src/components/AddressList/index.tsx +1 -1
  79. package/themes/single-business/src/components/UserProfile/index.tsx +1 -1
@@ -51,7 +51,9 @@ const BusinessPreorderUI = (props: BusinessPreorderParams) => {
51
51
  const [selectDate, setSelectedDate] = useState<any>(null)
52
52
  const [datesWhitelist, setDateWhitelist] = useState<any>([{ start: null, end: null }])
53
53
  const [isEnabled, setIsEnabled] = useState(false)
54
- const {top} = useSafeAreaInsets()
54
+ const { top } = useSafeAreaInsets()
55
+ const showOrderTime = (selectedPreorderType === 1 && Object.keys(menu)?.length > 0) || selectedPreorderType === 0
56
+ const isPreOrderSetting = configs?.preorder_status_enabled?.value === '1'
55
57
  const styles = StyleSheet.create({
56
58
  container: {
57
59
  height: windowHeight,
@@ -300,60 +302,62 @@ const BusinessPreorderUI = (props: BusinessPreorderParams) => {
300
302
  />
301
303
  </View>
302
304
  </BusinessInfoWrapper>
303
- <PreorderTypeWrapper>
304
- <OText
305
- size={16}
306
- style={{
307
- fontWeight: '600',
308
- lineHeight: 24,
309
- marginBottom: 12
310
- }}
311
- >
312
- {t('PREORDER_TYPE', 'Preorder type')}
313
- </OText>
314
- <SelectDropdown
315
- defaultValueByIndex={selectedPreorderType}
316
- data={preorderTypeList}
317
- // disabled={orderState.loading}
318
- onSelect={(selectedItem, index) => {
319
- setSelectedPreorderType(index)
320
- }}
321
- buttonTextAfterSelection={(selectedItem, index) => {
322
- return selectedItem.name
323
- }}
324
- rowTextForSelection={(item, index) => {
325
- return item.name
326
- }}
327
- buttonStyle={styles.selectOption}
328
- buttonTextStyle={{
329
- color: theme.colors.disabled,
330
- fontSize: 14,
331
- textAlign: 'left',
332
- marginHorizontal: 0
333
- }}
334
- dropdownStyle={{
335
- borderRadius: 8,
336
- borderColor: theme.colors.lightGray,
337
- marginTop: Platform.OS === 'ios' ? 12 : -top
338
- }}
339
- rowStyle={{
340
- borderBottomColor: theme.colors.backgroundGray100,
341
- backgroundColor: theme.colors.backgroundGray100,
342
- height: 40,
343
- flexDirection: 'column',
344
- alignItems: 'flex-start',
345
- paddingTop: 8,
346
- paddingHorizontal: 14
347
- }}
348
- rowTextStyle={{
349
- color: theme.colors.disabled,
350
- fontSize: 14,
351
- marginHorizontal: 0
352
- }}
353
- renderDropdownIcon={() => dropDownIcon()}
354
- dropdownOverlayColor='transparent'
355
- />
356
- </PreorderTypeWrapper>
305
+ {isPreOrderSetting && (
306
+ <PreorderTypeWrapper>
307
+ <OText
308
+ size={16}
309
+ style={{
310
+ fontWeight: '600',
311
+ lineHeight: 24,
312
+ marginBottom: 12
313
+ }}
314
+ >
315
+ {t('PREORDER_TYPE', 'Preorder type')}
316
+ </OText>
317
+ <SelectDropdown
318
+ defaultValueByIndex={selectedPreorderType}
319
+ data={preorderTypeList}
320
+ // disabled={orderState.loading}
321
+ onSelect={(selectedItem, index) => {
322
+ setSelectedPreorderType(index)
323
+ }}
324
+ buttonTextAfterSelection={(selectedItem, index) => {
325
+ return selectedItem.name
326
+ }}
327
+ rowTextForSelection={(item, index) => {
328
+ return item.name
329
+ }}
330
+ buttonStyle={styles.selectOption}
331
+ buttonTextStyle={{
332
+ color: theme.colors.disabled,
333
+ fontSize: 14,
334
+ textAlign: 'left',
335
+ marginHorizontal: 0
336
+ }}
337
+ dropdownStyle={{
338
+ borderRadius: 8,
339
+ borderColor: theme.colors.lightGray,
340
+ marginTop: Platform.OS === 'ios' ? 12 : -top
341
+ }}
342
+ rowStyle={{
343
+ borderBottomColor: theme.colors.backgroundGray100,
344
+ backgroundColor: theme.colors.backgroundGray100,
345
+ height: 40,
346
+ flexDirection: 'column',
347
+ alignItems: 'flex-start',
348
+ paddingTop: 8,
349
+ paddingHorizontal: 14
350
+ }}
351
+ rowTextStyle={{
352
+ color: theme.colors.disabled,
353
+ fontSize: 14,
354
+ marginHorizontal: 0
355
+ }}
356
+ renderDropdownIcon={() => dropDownIcon()}
357
+ dropdownOverlayColor='transparent'
358
+ />
359
+ </PreorderTypeWrapper>
360
+ )}
357
361
  {selectedPreorderType === 1 && (
358
362
  <MenuWrapper>
359
363
  <OText
@@ -373,78 +377,94 @@ const BusinessPreorderUI = (props: BusinessPreorderParams) => {
373
377
  />
374
378
  </MenuWrapper>
375
379
  )}
376
- <OrderTimeWrapper>
380
+ {isPreOrderSetting && showOrderTime && (
381
+ <OrderTimeWrapper>
382
+ <OText
383
+ size={16}
384
+ style={{
385
+ fontWeight: '600',
386
+ lineHeight: 24
387
+ }}
388
+ >
389
+ {t('ORDER_TIME', 'Order time')}
390
+ </OText>
391
+ <View style={{ flex: 1 }}>
392
+ {selectDate && datesWhitelist[0]?.start !== null && (
393
+ <CalendarStrip
394
+ scrollable
395
+ style={styles.calendar}
396
+ calendarHeaderContainerStyle={styles.calendarHeaderContainer}
397
+ calendarHeaderStyle={styles.calendarHeader}
398
+ dateNumberStyle={styles.dateNumber}
399
+ dateNameStyle={styles.dateName}
400
+ iconContainer={{ flex: 0.1 }}
401
+ highlightDateNameStyle={styles.highlightDateName}
402
+ highlightDateNumberStyle={styles.highlightDateNumber}
403
+ dayContainerStyle={{ height: '100%' }}
404
+ highlightDateContainerStyle={{ height: '100%' }}
405
+ calendarHeaderFormat='MMMM, YYYY'
406
+ iconStyle={{ borderWidth: 1 }}
407
+ selectedDate={selectDate}
408
+ datesWhitelist={datesWhitelist}
409
+ disabledDateNameStyle={styles.disabledDateName}
410
+ disabledDateNumberStyle={styles.disabledDateNumber}
411
+ disabledDateOpacity={0.6}
412
+ onDateSelected={(date) => onSelectDate(date)}
413
+ leftSelector={<LeftSelector />}
414
+ rightSelector={<RightSelector />}
415
+ />
416
+ )}
417
+ </View>
418
+ <TimeListWrapper nestedScrollEnabled={true}>
419
+ {(isEnabled && timeList?.length > 0) ? (
420
+ <TimeContentWrapper>
421
+ {timeList.map((time: any, i: number) => (
422
+ <TouchableOpacity key={i} onPress={() => handleChangeTime(time.value)}>
423
+ <TimeItem active={timeSelected === time.value}>
424
+ <OText
425
+ size={14}
426
+ color={timeSelected === time.value ? theme.colors.primary : theme.colors.textNormal}
427
+ style={{
428
+ lineHeight: 24
429
+ }}
430
+ >{time.text}</OText>
431
+ </TimeItem>
432
+ </TouchableOpacity>
433
+ ))}
434
+ {timeList.length % 3 === 2 && (
435
+ <TimeItem style={{ backgroundColor: 'transparent' }} />
436
+ )}
437
+ </TimeContentWrapper>
438
+ ) : (
439
+ <OText
440
+ size={16}
441
+ style={{
442
+ fontWeight: '600',
443
+ lineHeight: 24,
444
+ marginBottom: 12,
445
+ textAlign: 'center'
446
+ }}
447
+ >
448
+ {t('ERROR_ADD_PRODUCT_BUSINESS_CLOSED', 'The business is closed at the moment')}
449
+ </OText>
450
+ )}
451
+ </TimeListWrapper>
452
+ </OrderTimeWrapper>
453
+ )}
454
+ {!isPreOrderSetting && (
377
455
  <OText
378
456
  size={16}
379
457
  style={{
380
458
  fontWeight: '600',
381
- lineHeight: 24
459
+ lineHeight: 24,
460
+ marginTop: 30,
461
+ marginBottom: 12,
462
+ textAlign: 'center'
382
463
  }}
383
- >
384
- {t('ORDER_TIME', 'Order time')}
464
+ >
465
+ {t('ERROR_ADD_PRODUCT_BUSINESS_CLOSED', 'The business is closed at the moment')}
385
466
  </OText>
386
- <View style={{ flex: 1 }}>
387
- {selectDate && datesWhitelist[0]?.start !== null && (
388
- <CalendarStrip
389
- scrollable
390
- style={styles.calendar}
391
- calendarHeaderContainerStyle={styles.calendarHeaderContainer}
392
- calendarHeaderStyle={styles.calendarHeader}
393
- dateNumberStyle={styles.dateNumber}
394
- dateNameStyle={styles.dateName}
395
- iconContainer={{ flex: 0.1 }}
396
- highlightDateNameStyle={styles.highlightDateName}
397
- highlightDateNumberStyle={styles.highlightDateNumber}
398
- dayContainerStyle={{ height: '100%' }}
399
- highlightDateContainerStyle={{ height: '100%' }}
400
- calendarHeaderFormat='MMMM, YYYY'
401
- iconStyle={{ borderWidth: 1 }}
402
- selectedDate={selectDate}
403
- datesWhitelist={datesWhitelist}
404
- disabledDateNameStyle={styles.disabledDateName}
405
- disabledDateNumberStyle={styles.disabledDateNumber}
406
- disabledDateOpacity={0.6}
407
- onDateSelected={(date) => onSelectDate(date)}
408
- leftSelector={<LeftSelector />}
409
- rightSelector={<RightSelector />}
410
- />
411
- )}
412
- </View>
413
- <TimeListWrapper nestedScrollEnabled={true}>
414
- {(isEnabled && timeList?.length > 0) ? (
415
- <TimeContentWrapper>
416
- {timeList.map((time: any, i: number) => (
417
- <TouchableOpacity key={i} onPress={() => handleChangeTime(time.value)}>
418
- <TimeItem active={timeSelected === time.value}>
419
- <OText
420
- size={14}
421
- color={timeSelected === time.value ? theme.colors.primary : theme.colors.textNormal}
422
- style={{
423
- lineHeight: 24
424
- }}
425
- >{time.text}</OText>
426
- </TimeItem>
427
- </TouchableOpacity>
428
- ))}
429
- {timeList.length % 3 === 2 && (
430
- <TimeItem style={{ backgroundColor: 'transparent' }} />
431
- )}
432
- </TimeContentWrapper>
433
- ) : (
434
- <OText
435
- size={16}
436
- style={{
437
- fontWeight: '600',
438
- lineHeight: 24,
439
- marginBottom: 12,
440
- textAlign: 'center'
441
- }}
442
- >
443
- {t('ERROR_ADD_PRODUCT_BUSINESS_CLOSED', 'The business is closed at the moment')}
444
- </OText>
445
- )}
446
- </TimeListWrapper>
447
- </OrderTimeWrapper>
467
+ )}
448
468
  <OButton
449
469
  text={t('GO_TO_MENU', 'Go to menu')}
450
470
  textStyle={{ color: 'white' }}
@@ -44,11 +44,11 @@ const BusinessProductsCategoriesUI = (props: any) => {
44
44
  borderTopStartRadius: 4,
45
45
  borderTopEndRadius: 4,
46
46
  backgroundColor: theme.colors.textPrimary,
47
- },
48
- tabDeactived: {
47
+ },
48
+ tabDeactived: {
49
49
  marginTop: 10,
50
50
  height: 4
51
- }
51
+ }
52
52
  });
53
53
 
54
54
  const handleCategoryScroll = (category: any) => {
@@ -111,8 +111,10 @@ const BusinessProductsCategoriesUI = (props: any) => {
111
111
  categories.length &&
112
112
  categories.map((category: any) => (
113
113
  <Tab
114
- key={category.name}
115
- onPress={() => handleCategoryScroll(category)}
114
+ key={category.id}
115
+ onPress={() => requestAnimationFrame(() => {
116
+ handleCategoryScroll(category)
117
+ })}
116
118
  style={[
117
119
  category.id === 'featured' && !featured && styles.featuredStyle,
118
120
  {
@@ -4,11 +4,12 @@ import { SingleProductCard } from '../SingleProductCard';
4
4
  import { NotFoundSource } from '../NotFoundSource';
5
5
  import { BusinessProductsListParams } from '../../types';
6
6
  import { OButton, OIcon, OModal, OText } from '../shared';
7
- import { ProductsContainer, ErrorMessage, WrapperNotFound } from './styles';
7
+ import { ProductsContainer, ErrorMessage, WrapperNotFound, RibbonBox, SubCategoriesContainer, ContainerButton, HeaderWrapper } from './styles';
8
8
  import { Fade, Placeholder, PlaceholderLine } from 'rn-placeholder';
9
9
  import { View, ScrollView } from 'react-native';
10
10
  import { StyleSheet } from 'react-native';
11
11
  import { useTheme } from 'styled-components/native';
12
+ import { shape } from '../../utils'
12
13
 
13
14
  const BusinessProductsListUI = (props: BusinessProductsListParams) => {
14
15
  const {
@@ -27,7 +28,11 @@ const BusinessProductsListUI = (props: BusinessProductsListParams) => {
27
28
  handleCancelSearch,
28
29
  categoriesLayout,
29
30
  setCategoriesLayout,
30
- currentCart
31
+ currentCart,
32
+ setSubcategoriesSelected,
33
+ subcategoriesSelected,
34
+ onClickCategory,
35
+ lazyLoadProductsRecommended
31
36
  } = props;
32
37
 
33
38
  const [, t] = useLanguage();
@@ -43,20 +48,85 @@ const BusinessProductsListUI = (props: BusinessProductsListParams) => {
43
48
  setCategoriesLayout(_categoriesLayout)
44
49
  }
45
50
 
46
- return (
47
- <ProductsContainer>
48
- {category.id &&
49
- categoryState.products?.sort((a: any, b: any) => a.rank - b.rank).map((product: any) => (
50
- <SingleProductCard
51
- key={'prod_' + product.id}
52
- isSoldOut={product.inventoried && !product.quantity}
53
- product={product}
54
- businessId={businessId}
55
- onProductClick={() => onProductClick(product)}
56
- productAddedToCartLength={currentCart?.products?.reduce((productsLength: number, Cproduct: any) => { return productsLength + (Cproduct?.id === product?.id ? Cproduct?.quantity : 0) }, 0)}
51
+ const onClickSubcategory = (subCategory : any, parentCategory : any) => {
52
+ if (parentCategory && lazyLoadProductsRecommended) {
53
+ onClickCategory(parentCategory)
54
+ }
55
+ if (!subCategory) {
56
+ setSubcategoriesSelected?.(subcategoriesSelected.filter((_subcategory : any) => _subcategory?.parent_category_id !== parentCategory?.id))
57
+ return
58
+ }
59
+ const categoryFounded = subcategoriesSelected.find((_subcategory : any) => subCategory?.id === _subcategory?.id)
60
+ if (categoryFounded) {
61
+ setSubcategoriesSelected?.(subcategoriesSelected.filter((_subcategory : any) => subCategory?.id !== _subcategory?.id))
62
+ } else {
63
+ setSubcategoriesSelected?.([...subcategoriesSelected, subCategory])
64
+ }
65
+ }
66
+
67
+ const SubcategoriesComponent = ({ category } : any) => {
68
+ const allsubcategorySelected = !subcategoriesSelected?.some((subcategory : any) => category?.id === subcategory?.parent_category_id)
69
+
70
+ return (
71
+ <SubCategoriesContainer>
72
+ <ContainerButton
73
+ isSelected={allsubcategorySelected}
74
+ >
75
+ <OButton
76
+ onClick={() => onClickSubcategory(null, category)}
77
+ bgColor={allsubcategorySelected ? theme.colors.primary : theme.colors.backgroundGray}
78
+ text={`${t('ALL', 'All')} ${allsubcategorySelected ? 'X' : ''}`}
79
+ style={bpStyles.categoryButtonStyle}
80
+ textStyle={{ color: allsubcategorySelected ? theme.colors.white : theme.colors.textNormal, fontSize: 12 }}
57
81
  />
58
- ))}
82
+ </ContainerButton>
83
+ {category?.subcategories?.map((subcategory : any) => {
84
+ const isSubcategorySelected = subcategoriesSelected?.find((_subcategory : any) => _subcategory?.id === subcategory?.id)
85
+ return (
86
+ <ContainerButton
87
+ key={subcategory?.id}
88
+ isSelected={isSubcategorySelected}
89
+ >
90
+ <OButton
91
+ onClick={() => onClickSubcategory(subcategory, category)}
92
+ bgColor={isSubcategorySelected ? theme.colors.primary : theme.colors.backgroundGray}
93
+ text={`${subcategory?.name} ${isSubcategorySelected ? 'X' : ''}`}
94
+ style={bpStyles.categoryButtonStyle}
95
+ textStyle={{ color: isSubcategorySelected ? theme.colors.white : theme.colors.textNormal, fontSize: 12 }}
96
+ />
97
+ </ContainerButton>
98
+ )
99
+ }
100
+ )}
101
+ </SubCategoriesContainer>
102
+ )
103
+ }
104
+
59
105
 
106
+ return (
107
+ <ProductsContainer renderToHardwareTextureAndroid={categoryState.loading || isBusinessLoading}>
108
+ <HeaderWrapper>
109
+ {category?.subcategories?.length > 0 && (
110
+ <SubcategoriesComponent category={category} />
111
+ )}
112
+ </HeaderWrapper>
113
+ {category.id &&
114
+ categoryState.products
115
+ ?.filter((product : any) =>
116
+ !subcategoriesSelected.find((subcategory : any) => subcategory?.parent_category_id === category?.id) ||
117
+ subcategoriesSelected?.some((subcategory : any) => subcategory.id === product?.category_id)
118
+ ?.sort((a: any, b: any) => a.rank - b.rank)
119
+ ?.map((product: any) => (
120
+ <SingleProductCard
121
+ key={'prod_' + product.id}
122
+ isSoldOut={product.inventoried && !product.quantity}
123
+ product={product}
124
+ businessId={businessId}
125
+ onProductClick={() => onProductClick(product)}
126
+ productAddedToCartLength={currentCart?.products?.reduce((productsLength: number, Cproduct: any) => { return productsLength + (Cproduct?.id === product?.id ? Cproduct?.quantity : 0) }, 0)}
127
+ />
128
+ ))
129
+ )}
60
130
  {!category.id &&
61
131
  featured &&
62
132
  categoryState?.products?.find((product: any) => product.featured) && (
@@ -71,7 +141,7 @@ const BusinessProductsListUI = (props: BusinessProductsListParams) => {
71
141
  (product: any, i: any) =>
72
142
  product.featured && (
73
143
  <SingleProductCard
74
- key={i}
144
+ key={'feat_' + product.id}
75
145
  isSoldOut={product.inventoried && !product.quantity}
76
146
  product={product}
77
147
  businessId={businessId}
@@ -85,12 +155,17 @@ const BusinessProductsListUI = (props: BusinessProductsListParams) => {
85
155
  )}
86
156
 
87
157
  {!category?.id && categories.filter(category => category?.id !== null).map((category, i, _categories) => {
88
- const products = !isUseParentCategory
89
- ? categoryState?.products?.filter((product: any) => product?.category_id === category?.id) ?? []
90
- : categoryState?.products?.filter((product: any) => category?.children?.some((cat: any) => cat.category_id === product?.category_id)) ?? []
158
+ const _products = !isUseParentCategory
159
+ ? categoryState?.products?.filter((product : any) => product?.category_id === category?.id) ?? []
160
+ : categoryState?.products?.filter((product : any) => category?.children?.some((cat : any) => cat.category_id === product?.category_id)) ?? []
161
+ const products = subcategoriesSelected?.length > 0
162
+ ? _products?.filter((product : any) =>
163
+ !subcategoriesSelected.find((subcategory : any) => subcategory?.parent_category_id === category?.id) ||
164
+ subcategoriesSelected?.some((subcategory : any) => subcategory.id === product?.category_id))
165
+ : _products
91
166
 
92
167
  const shortCategoryDescription = category?.description?.length > 80 ? `${category?.description?.substring(0, 80)}...` : category?.description
93
-
168
+
94
169
  return (
95
170
  <React.Fragment key={'cat_' + category.id}>
96
171
  {products.length > 0 && (
@@ -110,10 +185,28 @@ const BusinessProductsListUI = (props: BusinessProductsListParams) => {
110
185
  <OText size={16} weight="600">
111
186
  {category.name}
112
187
  </OText>
188
+ {category?.ribbon?.enabled && (
189
+ <RibbonBox
190
+ bgColor={category?.ribbon?.color}
191
+ isRoundRect={category?.ribbon?.shape === shape?.rectangleRound}
192
+ isCapsule={category?.ribbon?.shape === shape?.capsuleShape}
193
+ >
194
+ <OText
195
+ size={10}
196
+ weight={'400'}
197
+ color={theme.colors.white}
198
+ numberOfLines={2}
199
+ ellipsizeMode='tail'
200
+ lineHeight={13}
201
+ >
202
+ {category?.ribbon?.text}
203
+ </OText>
204
+ </RibbonBox>
205
+ )}
113
206
  </View>
114
207
  {!!category?.description && (
115
208
  <View style={{ position: 'relative' }}>
116
- <OText size={12} weight={'500'} mBottom={5}>
209
+ <OText size={12} weight={'500'} mBottom={10} color='#909BA9'>
117
210
  {shortCategoryDescription}
118
211
  {category?.description?.length > 80 && (
119
212
  <OButton
@@ -133,6 +226,9 @@ const BusinessProductsListUI = (props: BusinessProductsListParams) => {
133
226
  </OText>
134
227
  </View>
135
228
  )}
229
+ {category?.subcategories?.length > 0 && (
230
+ <SubcategoriesComponent category={category} />
231
+ )}
136
232
  <>
137
233
  {products.sort((a: any, b: any) => a.rank - b.rank).map((product: any, i: any) => (
138
234
  <SingleProductCard
@@ -229,7 +325,7 @@ const BusinessProductsListUI = (props: BusinessProductsListParams) => {
229
325
  style={{ borderRadius: 7.6 }}
230
326
  />
231
327
  )}
232
- <OText>{openDescription?.description}</OText>
328
+ <OText mBottom={40}>{openDescription?.description}</OText>
233
329
  </ScrollView>
234
330
  </OModal>
235
331
  </ProductsContainer>
@@ -246,6 +342,15 @@ const bpStyles = StyleSheet.create({
246
342
  shadowRadius: 1,
247
343
  marginEnd: 13,
248
344
  },
345
+ categoryButtonStyle: {
346
+ borderWidth: 0,
347
+ marginLeft: 5,
348
+ marginRight: 5,
349
+ marginBottom: 10,
350
+ height: 35,
351
+ paddingLeft: 3,
352
+ paddingRight: 3,
353
+ }
249
354
  });
250
355
 
251
356
  export const BusinessProductsList = (props: BusinessProductsListParams) => {
@@ -1,4 +1,4 @@
1
- import styled from 'styled-components/native'
1
+ import styled, { css } from 'styled-components/native'
2
2
 
3
3
  export const ProductsContainer = styled.View`
4
4
  `
@@ -11,4 +11,34 @@ export const ErrorMessage = styled.View`
11
11
 
12
12
  export const WrapperNotFound = styled.View`
13
13
  height: 500px;
14
- `
14
+ `
15
+
16
+ export const RibbonBox = styled.View`
17
+ margin-left: 5px;
18
+ background-color: ${(props: any) => props.theme.colors.primary};
19
+ padding: 2px 8px;
20
+ max-width: 180px;
21
+
22
+ ${(props: any) => props.bgColor && css`
23
+ background-color: ${props.bgColor};
24
+ `}
25
+
26
+ ${(props: any) => props.isRoundRect && css`
27
+ border-radius: 7.6px;
28
+ `}
29
+
30
+ ${(props: any) => props.isCapsule && css`
31
+ border-radius: 50px;
32
+ `}
33
+ `
34
+
35
+ export const SubCategoriesContainer = styled.View`
36
+ flex-direction: row;
37
+ flex-wrap: wrap;
38
+ margin-bottom: 10px;
39
+ `
40
+
41
+ export const ContainerButton = styled.View`
42
+ `
43
+
44
+ export const HeaderWrapper = styled.View``
@@ -92,6 +92,7 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
92
92
  const [categoriesLayout, setCategoriesLayout] = useState<any>({})
93
93
  const [productListLayout, setProductListLayout] = useState<any>(null)
94
94
  const [isCategoryClicked, setCategoryClicked] = useState(false)
95
+ const [subcategoriesSelected, setSubcategoriesSelected] = useState([])
95
96
 
96
97
  const currentCart: any = Object.values(orderState.carts).find((cart: any) => cart?.business?.slug === business?.slug) ?? {}
97
98
 
@@ -254,6 +255,7 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
254
255
  lazyLoadProductsRecommended={business?.lazy_load_products_recommended}
255
256
  setSelectedCategoryId={setSelectedCategoryId}
256
257
  setCategoryClicked={setCategoryClicked}
258
+
257
259
  />
258
260
  )}
259
261
  </>
@@ -281,8 +283,11 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
281
283
  errorQuantityProducts={errorQuantityProducts}
282
284
  handleCancelSearch={handleCancel}
283
285
  categoriesLayout={categoriesLayout}
286
+ subcategoriesSelected={subcategoriesSelected}
287
+ lazyLoadProductsRecommended={business?.lazy_load_products_recommended}
284
288
  setCategoriesLayout={setCategoriesLayout}
285
289
  currentCart={currentCart}
290
+ setSubcategoriesSelected={setSubcategoriesSelected}
286
291
  />
287
292
  </WrapContent>
288
293
  </>
@@ -312,16 +317,18 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
312
317
  {!loading && auth && currentCart?.products?.length > 0 && categoryState.products.length !== 0 && (
313
318
  <FloatingButton
314
319
  btnText={
315
- currentCart?.subtotal >= currentCart?.minimum
316
- ? t('VIEW_ORDER', 'View Order')
317
- : `${t('MINIMUN_SUBTOTAL_ORDER', 'Minimum subtotal order:')} ${parsePrice(currentCart?.minimum)}`
320
+ openUpselling
321
+ ? t('LOADING', 'Loading')
322
+ : currentCart?.subtotal >= currentCart?.minimum
323
+ ? t('VIEW_ORDER', 'View Order')
324
+ : `${t('MINIMUN_SUBTOTAL_ORDER', 'Minimum subtotal order:')} ${parsePrice(currentCart?.minimum)}`
318
325
  }
319
- isSecondaryBtn={currentCart?.subtotal < currentCart?.minimum}
326
+ isSecondaryBtn={currentCart?.subtotal < currentCart?.minimum || openUpselling}
320
327
  btnLeftValueShow={currentCart?.subtotal >= currentCart?.minimum && currentCart?.products?.length > 0}
321
328
  btnRightValueShow={currentCart?.subtotal >= currentCart?.minimum && currentCart?.products?.length > 0}
322
329
  btnLeftValue={currentCart?.products?.length}
323
330
  btnRightValue={parsePrice(currentCart?.total)}
324
- disabled={currentCart?.subtotal < currentCart?.minimum}
331
+ disabled={currentCart?.subtotal < currentCart?.minimum || openUpselling}
325
332
  handleClick={() => setOpenUpselling(true)}
326
333
  />
327
334
  )}
@@ -90,33 +90,12 @@ const BusinessReviewsUI = (props: BusinessReviewsParams) => {
90
90
  </View>
91
91
  );
92
92
 
93
- const ReviewItem = ({ comment, created_at, total, customer }: any) => (
93
+ const ReviewItem = ({ comment, created_at, total }: any) => (
94
94
  <View style={{ marginBottom: 30 }}>
95
- <View
96
- style={{ flexDirection: 'row', marginBottom: 19, alignItems: 'center' }}>
97
- <OIcon
98
- url={theme.images.dummies.customerPhoto}
99
- width={38}
100
- height={38}
101
- style={{
102
- borderRadius: 7.6,
103
- borderWidth: 1,
104
- borderColor: theme.colors.border,
105
- marginEnd: 9,
106
- }}
107
- />
108
- <View>
109
- <OText size={12} color={theme.colors.textNormal} weight={'500'}>
110
- {customer?.name || 'Jane Cooper'}
111
- </OText>
112
- <OText size={10} color={theme.colors.textSecondary}>
113
- {moment(created_at).format('MMMM d, yyyy • hh:mm')}
114
- </OText>
115
- </View>
116
- </View>
117
- <OText size={10} color={theme.colors.textNormal}>
118
- {comment}
95
+ <OText size={12} color={theme.colors.textSecondary}>
96
+ {moment(created_at).format('MMMM d, yyyy hh:mm')}
119
97
  </OText>
98
+ <OText size={12} color={theme.colors.textNormal}>{comment}</OText>
120
99
  </View>
121
100
  );
122
101