ordering-ui-react-native 0.16.60 → 0.16.63

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 (20) hide show
  1. package/package.json +1 -1
  2. package/themes/business/src/components/Chat/index.tsx +9 -1
  3. package/themes/business/src/components/OrdersOption/index.tsx +3 -2
  4. package/themes/business/src/types/index.tsx +2 -1
  5. package/themes/original/src/components/BusinessBasicInformation/index.tsx +4 -4
  6. package/themes/original/src/components/BusinessController/index.tsx +7 -1
  7. package/themes/original/src/components/BusinessProductsList/index.tsx +5 -1
  8. package/themes/original/src/components/BusinessProductsListing/index.tsx +3 -0
  9. package/themes/original/src/components/BusinessProductsListing/styles.tsx +1 -0
  10. package/themes/original/src/components/BusinessesListing/Layout/Original/index.tsx +20 -10
  11. package/themes/original/src/components/BusinessesListing/index.tsx +3 -2
  12. package/themes/original/src/components/Cart/index.tsx +7 -7
  13. package/themes/original/src/components/Checkout/index.tsx +7 -6
  14. package/themes/original/src/components/OrderSummary/index.tsx +3 -3
  15. package/themes/original/src/components/ProductForm/index.tsx +201 -171
  16. package/themes/original/src/components/ProductForm/styles.tsx +3 -5
  17. package/themes/original/src/components/ProductOption/index.tsx +1 -1
  18. package/themes/original/src/components/SingleOrderCard/index.tsx +156 -121
  19. package/themes/original/src/components/SingleProductCard/index.tsx +11 -4
  20. 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.63",
4
4
  "description": "Reusable components made in react native",
5
5
  "main": "src/index.tsx",
6
6
  "author": "ordering.inc",
package/themes/business/src/components/Chat/index.tsx CHANGED
@@ -111,6 +111,13 @@ const ChatUI = (props: MessagesParams) => {
111
111
  { key: 'driver_message_4', text: t('DRIVER_MESSAGE_4', 'driver_message_4') }
112
112
  ]
113
113
 
114
+ const adminMessageList: any = [
115
+ { key: 'message_1', text: t('ADMIN_MESSAGE_1', 'admin_message_1') },
116
+ { key: 'message_2', text: t('ADMIN_MESSAGE_2', 'admin_message_2') },
117
+ { key: 'message_3', text: t('ADMIN_MESSAGE_3', 'admin_message_3') },
118
+ { key: 'message_4', text: t('ADMIN_MESSAGE_4', 'admin_message_4') }
119
+ ]
120
+
114
121
  const handleClickQuickMessage = (text: string) => {
115
122
  setMessage && setMessage(`${message}${text}`)
116
123
  }
@@ -426,7 +433,8 @@ const ChatUI = (props: MessagesParams) => {
426
433
  };
427
434
 
428
435
  useEffect(() => {
429
- if (user.level === 2) setMessageList(storeMessageList)
436
+ if (user.level === 0) setMessageList(adminMessageList)
437
+ else if (user.level === 2) setMessageList(storeMessageList)
430
438
  else if (user.level === 4) setMessageList(driverMessageList)
431
439
  else setMessageList([])
432
440
  }, [user])
package/themes/business/src/components/OrdersOption/index.tsx CHANGED
@@ -88,7 +88,8 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
88
88
  handleClickLogisticOrder,
89
89
  logisticOrders,
90
90
  loadLogisticOrders,
91
- isLogisticActivated
91
+ isLogisticActivated,
92
+ isAlsea
92
93
  } = props;
93
94
 
94
95
  const defaultSearchList = {
@@ -545,7 +546,7 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
545
546
  </ScrollView>
546
547
  </FiltersTab>
547
548
  <View style={{ flex: 1, minHeight: HEIGHT_SCREEN - 450 }}>
548
- {currentTabSelected !== 'logisticOrders' && (
549
+ {currentTabSelected !== 'logisticOrders' && !isAlsea && (
549
550
  <View
550
551
  style={{
551
552
  display: 'flex',
package/themes/business/src/types/index.tsx CHANGED
@@ -293,7 +293,8 @@ export interface OrdersOptionParams {
293
293
  handleClickLogisticOrder: (status: number, orderId: number) => void,
294
294
  logisticOrders: {orders: Array<any>, loading: boolean, error: Array<string> | string},
295
295
  loadLogisticOrders: () => void;
296
- isLogisticActivated?: boolean
296
+ isLogisticActivated?: boolean;
297
+ isAlsea?: boolean;
297
298
  }
298
299
  export interface ActiveOrdersParams {
299
300
  orders?: any;
package/themes/original/src/components/BusinessBasicInformation/index.tsx CHANGED
@@ -1,5 +1,5 @@
1
1
  import React, { useState, useEffect } from 'react';
2
- import { StyleSheet, View, TouchableOpacity, Linking } from 'react-native';
2
+ import { StyleSheet, View, TouchableOpacity, Linking, Pressable } from 'react-native';
3
3
  import { useUtils, useOrder, useLanguage, useOrderingTheme } from 'ordering-components/native';
4
4
  import { useTheme } from 'styled-components/native';
5
5
  import { OIcon, OText, OModal } from '../shared';
@@ -218,14 +218,14 @@ export const BusinessBasicInformation = (
218
218
  />
219
219
  )}
220
220
  {!!business?.tiktok_profile && (
221
- <TouchableOpacity style={styles.socialIcon} onPress={() => Linking.openURL(business?.tiktok_profile)}>
221
+ <Pressable style={styles.socialIcon} onPress={() => Linking.openURL(business?.tiktok_profile)}>
222
222
  <View style={styles.tiktokIcon}>
223
223
  <OIcon
224
224
  src={theme.images.general.tiktok}
225
225
  style={{ width: '100%', height: '100%' }}
226
226
  />
227
227
  </View>
228
- </TouchableOpacity>
228
+ </Pressable>
229
229
  )}
230
230
  {!!business?.pinterest_profile && (
231
231
  <SocialNetWork
@@ -327,7 +327,7 @@ export const BusinessBasicInformation = (
327
327
  </Placeholder>
328
328
  ) : (
329
329
  <TitleWrapper>
330
- <OText size={24} weight={'600'}>
330
+ <OText size={24} weight={'600'} numberOfLines={2}>
331
331
  {business?.name}
332
332
  </OText>
333
333
  {business?.ribbon?.enabled && (
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
 
@@ -210,6 +216,11 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
210
216
  }
211
217
  }
212
218
 
219
+ const handleChangeCity = (cityId : number | null) => {
220
+ changeCityFilter(orderState?.options?.city_id === cityId ? null : cityId)
221
+ setIsOpenCities(false)
222
+ }
223
+
213
224
  useEffect(() => {
214
225
  if (!businessesList?.loading) {
215
226
  const fb = businessesList.businesses.filter((b) => b.featured === true && b?.open);
@@ -286,9 +297,13 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
286
297
  <BusinessLogosContainer horizontal>
287
298
  {businessesList?.loading ? (
288
299
  <Placeholder Animation={Fade}>
289
- {[...Array(10).keys()].map(item => (
290
- <PlaceholderLine key={item} width={56} height={56} />
291
- ))}
300
+ <View style={{ flexDirection: 'row' }}>
301
+ {[...Array(10).keys()].map(i => (
302
+ <View style={styles.businessSkeleton} key={i}>
303
+ <PlaceholderLine style={{ width: '100%', height: '100%' }} />
304
+ </View>
305
+ ))}
306
+ </View>
292
307
  </Placeholder>
293
308
  ) : (
294
309
  <>
@@ -335,11 +350,6 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
335
350
  <OText size={18} weight={700} color={theme.colors?.white}>
336
351
  {t('WELCOME', 'Welcome')} {user?.name}!
337
352
  </OText>
338
- <TouchableOpacity
339
- onPress={() => searchBarRef?.current?.focus?.()}
340
- >
341
- <Ionicons name='search' style={{ ...styles.iconStyle, color: theme.colors?.white }} />
342
- </TouchableOpacity>
343
353
  </View>
344
354
  )}
345
355
  <Search isChewLayout={isChewLayout}>
@@ -644,7 +654,7 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
644
654
  borderBottomColor: orderState?.options?.city_id === city?.id ? theme.colors.primary : theme.colors.backgroundGray,
645
655
  marginBottom: 10,
646
656
  }}
647
- onPress={() => changeCityFilter(city?.id)}
657
+ onPress={() => handleChangeCity(city?.id)}
648
658
  disabled={orderState?.loading}
649
659
  >
650
660
  <OText color={orderState?.options?.city_id === city?.id ? theme.colors.primary : theme.colors.black}>
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/Cart/index.tsx CHANGED
@@ -60,11 +60,11 @@ const CartUI = (props: any) => {
60
60
 
61
61
  const isCartPending = cart?.status === 2
62
62
  const isCouponEnabled = validationFields?.fields?.checkout?.coupon?.enabled
63
- const isCheckoutMultiBusinessEnabled: Boolean = configs?.checkout_multi_business_enabled?.value === '1'
63
+ const isCheckoutMultiBusinessEnabled: Boolean = configs?.checkout_multi_business_enabled?.value === '1'
64
64
 
65
65
  const business: any = (orderState?.carts && Object.values(orderState.carts).find((_cart: any) => _cart?.uuid === props.cartuuid)) ?? {}
66
66
  const businessId = business?.business_id ?? null
67
- const placeSpotTypes = [3, 4]
67
+ const placeSpotTypes = [4]
68
68
 
69
69
  const momentFormatted = !orderState?.option?.moment
70
70
  ? t('RIGHT_NOW', 'Right Now')
@@ -99,10 +99,10 @@ const CartUI = (props: any) => {
99
99
  setOpenUpselling(false)
100
100
  setCanOpenUpselling(false)
101
101
  if (isCheckoutMultiBusinessEnabled) {
102
- props.onNavigationRedirect('CheckoutNavigator', {
103
- screen: 'MultiCheckout'
104
- })
105
- } else {
102
+ props.onNavigationRedirect('CheckoutNavigator', {
103
+ screen: 'MultiCheckout'
104
+ })
105
+ } else {
106
106
  props.onNavigationRedirect('CheckoutNavigator', {
107
107
  screen: 'CheckoutPage',
108
108
  cartUuid: cart?.uuid,
@@ -446,7 +446,7 @@ const CartUI = (props: any) => {
446
446
  </OText>
447
447
  </View>
448
448
  )}
449
- </>
449
+ </>
450
450
  )}
451
451
  </BusinessItemAccordion>
452
452
 
package/themes/original/src/components/Checkout/index.tsx CHANGED
@@ -141,9 +141,9 @@ const CheckoutUI = (props: any) => {
141
141
  const [showGateway, setShowGateway] = useState<any>({ closedByUsed: false, open: false });
142
142
  const [webviewPaymethod, setWebviewPaymethod] = useState<any>(null)
143
143
  const [isOpen, setIsOpen] = useState(false)
144
- const [requiredFields, setRequiredFields] = useState<any>([])
144
+ const [requiredFields, setRequiredFields] = useState<any>([])
145
145
 
146
- const placeSpotTypes = [3, 4]
146
+ const placeSpotTypes = [4]
147
147
  const businessConfigs = businessDetails?.business?.configs ?? []
148
148
  const isWalletCashEnabled = businessConfigs.find((config: any) => config.key === 'wallet_cash_enabled')?.value === '1'
149
149
  const isWalletCreditPointsEnabled = businessConfigs.find((config: any) => config.key === 'wallet_credit_point_enabled')?.value === '1'
@@ -178,15 +178,15 @@ const CheckoutUI = (props: any) => {
178
178
  }
179
179
  }
180
180
 
181
- const handlePlaceOrder = (confirmPayment : any) => {
181
+ const handlePlaceOrder = (confirmPayment: any) => {
182
182
  if (!userErrors.length && !requiredFields?.length) {
183
183
  handlerClickPlaceOrder && handlerClickPlaceOrder(null, null, confirmPayment)
184
184
  return
185
185
  }
186
186
  if (requiredFields?.length) {
187
- setIsOpen(true)
188
- return
189
- }
187
+ setIsOpen(true)
188
+ return
189
+ }
190
190
  let stringError = ''
191
191
  Object.values(userErrors).map((item: any, i: number) => {
192
192
  stringError += (i + 1) === userErrors.length ? `- ${item?.message || item}` : `- ${item?.message || item}\n`
@@ -646,6 +646,7 @@ const CheckoutUI = (props: any) => {
646
646
  cart={cart}
647
647
  isCartPending={cart?.status === 2}
648
648
  onNavigationRedirect={onNavigationRedirect}
649
+ placeSpotTypes={placeSpotTypes}
649
650
  />
650
651
  </>
651
652
  )}
package/themes/original/src/components/OrderSummary/index.tsx CHANGED
@@ -39,7 +39,8 @@ const OrderSummaryUI = (props: any) => {
39
39
  commentState,
40
40
  handleChangeComment,
41
41
  onNavigationRedirect,
42
- handleRemoveOfferClick
42
+ handleRemoveOfferClick,
43
+ placeSpotTypes
43
44
  } = props;
44
45
 
45
46
  const theme = useTheme()
@@ -52,7 +53,6 @@ const OrderSummaryUI = (props: any) => {
52
53
  const [confirm, setConfirm] = useState<any>({ open: false, content: null, handleOnAccept: null, id: null, title: null })
53
54
  const [openPlaceModal, setOpenPlaceModal] = useState(false)
54
55
  const isCouponEnabled = validationFields?.fields?.checkout?.coupon?.enabled;
55
- const placeSpotTypes = [3, 4]
56
56
 
57
57
  const handleDeleteClick = (product: any) => {
58
58
  removeProduct(product, cart)
@@ -304,7 +304,7 @@ const OrderSummaryUI = (props: any) => {
304
304
  </OSTable>
305
305
  </View>
306
306
  )}
307
- {placeSpotTypes.includes(orderState?.options?.type) && (
307
+ {placeSpotTypes && placeSpotTypes.includes(orderState?.options?.type) && (
308
308
  <OSTable style={{ marginTop: 15 }}>
309
309
  <OText size={14} lineHeight={21} weight={'600'}>
310
310
  {t('SPOT', 'Spot')}: {cart?.place?.name || t('NO_SELECTED', 'No selected')}
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
 
@@ -162,7 +169,7 @@ export const ProductOptionsUI = (props: any) => {
162
169
  const [gallery, setGallery] = useState([])
163
170
  const [thumbsSwiper, setThumbsSwiper] = useState(0)
164
171
  const [indexGallery, setIndexGallery] = useState(0)
165
- const [selOpt, setSelectedOpt] = useState(0);
172
+ const [selOpt, setSelectedOpt] = useState(-1);
166
173
  const [isHaveWeight, setIsHaveWeight] = useState(false)
167
174
  const [playing, setPlaying] = useState(false);
168
175
  const [qtyBy, setQtyBy] = useState({
@@ -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>
@@ -314,6 +323,14 @@ export const ProductOptionsUI = (props: any) => {
314
323
  </>
315
324
  );
316
325
 
326
+ const handleScroll = ({ nativeEvent: { contentOffset, layoutMeasurement } }: any) => {
327
+
328
+ const _topOption = Object.keys(optionLayout).find(((option: any) => Math.abs(contentOffset?.y - layoutMeasurement?.height - optionLayout[option]?.y) < 20))
329
+ if (_topOption) {
330
+ const _topOptionId = Number(_topOption.replace('id:', ''))
331
+ }
332
+ }
333
+
317
334
  const handleGoBack = navigation?.canGoBack()
318
335
  ? () => navigation.goBack()
319
336
  : () => navigation.navigate('Business', { store: props.businessSlug })
@@ -366,6 +383,77 @@ export const ProductOptionsUI = (props: any) => {
366
383
  }
367
384
  }, [product])
368
385
 
386
+ const ActionButton = () => {
387
+ return (
388
+ <View
389
+ style={{
390
+ width: isHaveWeight ? '100%' : ((isSoldOut || maxProductQuantity <= 0) ? '60%' : '40%'),
391
+ }}>
392
+ {((productCart &&
393
+ auth &&
394
+ orderState.options?.address_id) || (isSoldOut || maxProductQuantity <= 0)) && (
395
+ <OButton
396
+ onClick={() => handleSaveProduct()}
397
+ imgRightSrc=""
398
+ text={`${orderState.loading
399
+ ? t('LOADING', 'Loading')
400
+ : (isSoldOut || maxProductQuantity <= 0)
401
+ ? t('SOLD_OUT', 'Sold out')
402
+ : editMode
403
+ ? t('UPDATE', 'Update')
404
+ : t('ADD', 'Add')
405
+ }`}
406
+ isDisabled={isSoldOut || maxProductQuantity <= 0 || (product?.minimum_per_order && (productCart?.quantity < product?.minimum_per_order)) || (product?.maximum_per_order && (productCart?.quantity > product?.maximum_per_order))}
407
+ textStyle={{
408
+ color: saveErrors || isSoldOut || maxProductQuantity <= 0 ? theme.colors.primary : theme.colors.white,
409
+ fontSize: orderState.loading || editMode ? 10 : 14
410
+ }}
411
+ style={{
412
+ 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,
413
+ 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,
414
+ opacity: saveErrors || isSoldOut || maxProductQuantity <= 0 ? 0.3 : 1,
415
+ borderRadius: 7.6,
416
+ height: 44,
417
+ shadowOpacity: 0,
418
+ borderWidth: 1,
419
+ marginTop: isHaveWeight ? 10 : 0
420
+ }}
421
+ />
422
+ )}
423
+ {auth &&
424
+ !orderState.options?.address_id &&
425
+ (orderState.loading ? (
426
+ <OButton
427
+ isDisabled
428
+ text={t('LOADING', 'Loading')}
429
+ imgRightSrc=""
430
+ textStyle={{ fontSize: 10 }}
431
+ />
432
+ ) : (
433
+ <OButton onClick={navigation.navigate('AddressList')} />
434
+ ))}
435
+ {!auth && (
436
+ <OButton
437
+ isDisabled={isSoldOut || maxProductQuantity <= 0}
438
+ onClick={() => handleRedirectLogin()}
439
+ text={
440
+ isSoldOut || maxProductQuantity <= 0
441
+ ? t('SOLD_OUT', 'Sold out')
442
+ : t('LOGIN_SIGNUP', 'Login / Sign Up')
443
+ }
444
+ imgRightSrc=""
445
+ textStyle={{ color: theme.colors.primary, fontSize: 14 }}
446
+ style={{
447
+ height: 44,
448
+ borderColor: theme.colors.primary,
449
+ backgroundColor: theme.colors.white,
450
+ }}
451
+ />
452
+ )}
453
+ </View>
454
+ )
455
+ }
456
+
369
457
  return (
370
458
  <SafeAreaView style={{ flex: 1 }}>
371
459
  <TopHeader>
@@ -377,7 +465,8 @@ export const ProductOptionsUI = (props: any) => {
377
465
  <ScrollView
378
466
  ref={scrollViewRef}
379
467
  contentContainerStyle={{ paddingBottom: 80 }}
380
- stickyHeaderIndices={[2]}>
468
+ stickyHeaderIndices={[2]}
469
+ onScroll={handleScroll}>
381
470
  <WrapHeader onLayout={(event: any) => setHeaderRefHeight(event.nativeEvent.layout?.height)}>
382
471
  {loading && !product ? (
383
472
  <View style={styles.productHeaderSkeleton}>
@@ -601,36 +690,36 @@ export const ProductOptionsUI = (props: any) => {
601
690
  contentContainerStyle={{ paddingHorizontal: 33, backgroundColor: theme.colors.white }}
602
691
  >
603
692
  <TouchableOpacity
604
- key={`eopt_all_0`}
605
- onPress={() => setSelectedOpt(0)}
693
+ key={`eopt_key_00`}
694
+ onPress={() => setSelectedOpt(-1)}
606
695
  style={[
607
696
  styles.extraItem,
608
697
  {
609
- borderBottomColor: selOpt == 0 ? theme.colors.textNormal : theme.colors.border,
698
+ borderBottomColor: selOpt == -1 ? theme.colors.textNormal : theme.colors.border,
610
699
  },
611
700
  ]}>
612
701
  <OText
613
- color={selOpt == 0 ? theme.colors.textNormal : theme.colors.textSecondary}
614
- size={selOpt == 0 ? 14 : 12}
615
- weight={selOpt == 0 ? '600' : 'normal'}>
702
+ color={selOpt == -1 ? theme.colors.textNormal : theme.colors.textSecondary}
703
+ size={selOpt == -1 ? 14 : 12}
704
+ weight={selOpt == -1 ? '600' : 'normal'}>
616
705
  {t('ALL', 'All')}
617
706
  </OText>
618
707
  </TouchableOpacity>
619
708
  {product?.ingredients.length > 0 && (
620
709
  <TouchableOpacity
621
- key={`eopt_all_00`}
622
- onPress={() => setSelectedOpt(-1)}
710
+ key={`eopt_key_01`}
711
+ onPress={() => setSelectedOpt(0)}
623
712
  style={[
624
713
  styles.extraItem,
625
714
  {
626
715
  borderBottomColor:
627
- selOpt == -1 ? theme.colors.textNormal : theme.colors.border,
716
+ selOpt == 0 ? theme.colors.textNormal : theme.colors.border,
628
717
  },
629
718
  ]}>
630
719
  <OText
631
- color={selOpt == -1 ? theme.colors.textNormal : theme.colors.textSecondary}
632
- size={selOpt == -1 ? 14 : 12}
633
- weight={selOpt == -1 ? '600' : 'normal'}>
720
+ color={selOpt == 0 ? theme.colors.textNormal : theme.colors.textSecondary}
721
+ size={selOpt == 0 ? 14 : 12}
722
+ weight={selOpt == 0 ? '600' : 'normal'}>
634
723
  {t('INGREDIENTS', 'Ingredients')}
635
724
  </OText>
636
725
  </TouchableOpacity>
@@ -680,10 +769,10 @@ export const ProductOptionsUI = (props: any) => {
680
769
  </>
681
770
  ) : (
682
771
  <ProductEditions>
683
- {selOpt == 0 ? (
772
+ {selOpt === -1 ? (
684
773
  <>
685
774
  {product?.ingredients.length > 0 && (
686
- <View style={styles.optionContainer}>
775
+ <View style={styles.optionContainer} onLayout={(event: any) => handleOnLayout(event, 0)}>
687
776
  <SectionTitle>
688
777
  <OText size={16}>
689
778
  {t('INGREDIENTS', 'Ingredients')}
@@ -765,7 +854,7 @@ export const ProductOptionsUI = (props: any) => {
765
854
  </>
766
855
  ) : (
767
856
  <>
768
- {selOpt == -1 ? (
857
+ {selOpt === 0 ? (
769
858
  <View style={styles.optionContainer}>
770
859
  <SectionTitle>
771
860
  <OText size={16}>
@@ -886,173 +975,114 @@ export const ProductOptionsUI = (props: any) => {
886
975
  </ScrollView>
887
976
  )}
888
977
  {!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 ||
978
+ <ProductActions ios={Platform?.OS === 'ios'} isColumn={isHaveWeight}>
979
+ <View style={styles.actionContainer}>
980
+ <View>
981
+ <OText size={16} lineHeight={24} weight={'600'}>
982
+ {productCart.total ? parsePrice(productCart?.total) : ''}
983
+ </OText>
984
+ {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>}
985
+ {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>}
986
+ </View>
987
+ {productCart && !isSoldOut && maxProductQuantity > 0 && (
988
+ <>
989
+ <View style={styles.quantityControl}>
990
+ <TouchableOpacity
991
+ onPress={decrement}
992
+ disabled={productCart.quantity === 1 || isSoldOut}>
993
+ <OIcon
994
+ src={theme.images.general.minus}
995
+ width={16}
996
+ color={
997
+ productCart.quantity === 1 || isSoldOut
998
+ ? theme.colors.backgroundGray
999
+ : theme.colors.backgroundDark
1000
+ }
1001
+ />
1002
+ </TouchableOpacity>
1003
+ {qtyBy?.pieces && (
1004
+ <TextInput
1005
+ keyboardType='numeric'
1006
+ value={`${productCart?.quantity > 0 ? productCart?.quantity : ''}`}
1007
+ onChangeText={(val: any) => onChangeProductCartQuantity(parseInt(val))}
1008
+ editable={!orderState.loading}
1009
+ style={{
1010
+ borderWidth: 1,
1011
+ textAlign: 'center',
1012
+ minWidth: 60,
1013
+ borderRadius: 8,
1014
+ borderColor: theme.colors.inputBorderColor,
1015
+ height: 44,
1016
+ marginHorizontal: 10
1017
+ }}
1018
+ />
1019
+ )}
1020
+ {qtyBy?.weight_unit && (
1021
+ <OText
1022
+ size={12}
1023
+ lineHeight={18}
1024
+ style={{ minWidth: 40, textAlign: 'center' }}
1025
+ >
1026
+ {productCart.quantity * product?.weight}
1027
+ </OText>
1028
+ )}
1029
+ <TouchableOpacity
1030
+ onPress={increment}
1031
+ disabled={
1032
+ maxProductQuantity <= 0 ||
950
1033
  productCart.quantity >= maxProductQuantity ||
951
1034
  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>
1035
+ }>
1036
+ <OIcon
1037
+ src={theme.images.general.plus}
1038
+ width={16}
1039
+ color={
1040
+ maxProductQuantity <= 0 ||
1041
+ productCart.quantity >= maxProductQuantity ||
1042
+ isSoldOut
1043
+ ? theme.colors.backgroundGray
1044
+ : theme.colors.backgroundDark
1045
+ }
1046
+ />
971
1047
  </TouchableOpacity>
972
- <View style={{ alignItems: 'flex-start' }}>
1048
+ </View>
1049
+ {isHaveWeight && (
1050
+ <WeightUnitSwitch>
973
1051
  <TouchableOpacity
974
- onPress={() => handleSwitchQtyUnit('weight_unit')}
1052
+ onPress={() => handleSwitchQtyUnit('pieces')}
975
1053
  >
976
- <WeightUnitItem active={qtyBy?.weight_unit}>
1054
+ <WeightUnitItem active={qtyBy?.pieces}>
977
1055
  <OText
978
1056
  size={12}
979
1057
  lineHeight={18}
980
- color={qtyBy?.weight_unit ? theme.colors.primary : theme.colors.textNormal}
1058
+ color={qtyBy?.pieces ? theme.colors.primary : theme.colors.textNormal}
981
1059
  >
982
- {product?.weight_unit}
1060
+ {t('PIECES', 'pcs')}
983
1061
  </OText>
984
1062
  </WeightUnitItem>
985
1063
  </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
- />
1064
+ <View style={{ alignItems: 'flex-start' }}>
1065
+ <TouchableOpacity
1066
+ onPress={() => handleSwitchQtyUnit('weight_unit')}
1067
+ >
1068
+ <WeightUnitItem active={qtyBy?.weight_unit}>
1069
+ <OText
1070
+ size={12}
1071
+ lineHeight={18}
1072
+ color={qtyBy?.weight_unit ? theme.colors.primary : theme.colors.textNormal}
1073
+ >
1074
+ {product?.weight_unit}
1075
+ </OText>
1076
+ </WeightUnitItem>
1077
+ </TouchableOpacity>
1078
+ </View>
1079
+ </WeightUnitSwitch>
1080
+ )}
1081
+ </>
1054
1082
  )}
1083
+ {!isHaveWeight && <ActionButton />}
1055
1084
  </View>
1085
+ {isHaveWeight && <ActionButton />}
1056
1086
  </ProductActions>
1057
1087
  )}
1058
1088
  </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 {