ordering-ui-react-native 0.14.45 → 0.14.48

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.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "ordering-ui-react-native",
3
- "version": "0.14.45",
3
+ "version": "0.14.48",
4
4
  "description": "Reusable components made in react native",
5
5
  "main": "src/index.tsx",
6
6
  "author": "ordering.inc",
@@ -138,7 +138,7 @@ export const ProductOptionsUI = (props: any) => {
138
138
  </View>
139
139
  <View style={{ flexDirection: 'row', marginBottom: 10 }}>
140
140
  <OText size={16} style={{ flex: I18nManager.isRTL ? 1 : 0 }} color={theme.colors.primary}>{productCart.price ? parsePrice(productCart.price) : ''}</OText>
141
- {!!product?.offer_price && (
141
+ {product?.offer_price !== null && product?.in_offer && (
142
142
  <OText style={styles.regularPriceStyle}>{parsePrice(product?.offer_price)}</OText>
143
143
  )}
144
144
  </View>
@@ -86,7 +86,7 @@ export const SingleProductCard = (props: SingleProductCardParams) => {
86
86
  <OText size={12} numberOfLines={2} ellipsizeMode='tail' style={styles.textStyle}>{product?.description}</OText>
87
87
  <PricesContainer>
88
88
  <OText color={theme.colors.primary}>{parsePrice(product?.price)}</OText>
89
- {!!product?.offer_price && (
89
+ {product?.offer_price !== null && product?.in_offer && (
90
90
  <OText style={styles.regularPriceStyle}>{parsePrice(product?.offer_price)}</OText>
91
91
  )}
92
92
  </PricesContainer>
@@ -7,6 +7,7 @@ import {
7
7
  ScrollView,
8
8
  Platform,
9
9
  TouchableOpacity,
10
+ RefreshControl
10
11
  } from 'react-native';
11
12
  import {
12
13
  BusinessList as BusinessesListingController,
@@ -57,11 +58,12 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
57
58
  handleBusinessClick,
58
59
  paginationProps,
59
60
  handleChangeSearch,
60
- businessId
61
+ businessId
61
62
  } = props;
62
63
 
63
64
  const theme = useTheme();
64
65
  const isFocused = useIsFocused();
66
+ const [refreshing] = useState(false);
65
67
 
66
68
  const styles = StyleSheet.create({
67
69
  container: {
@@ -142,15 +144,15 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
142
144
  };
143
145
 
144
146
  const getDistance = (lat1: any, lon1: any, lat2: any, lon2: any) => {
145
- const R = 6371 // km
146
- const dLat = convertToRadian(lat2 - lat1)
147
- const dLon = convertToRadian(lon2 - lon1)
148
- const curLat1 = convertToRadian(lat1)
149
- const curLat2 = convertToRadian(lat2)
150
- const a = Math.sin(dLat / 2) * Math.sin(dLat / 2) + Math.sin(dLon / 2) * Math.sin(dLon / 2) * Math.cos(curLat1) * Math.cos(curLat2)
151
- const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a))
152
- return R * c
153
- }
147
+ const R = 6371 // km
148
+ const dLat = convertToRadian(lat2 - lat1)
149
+ const dLon = convertToRadian(lon2 - lon1)
150
+ const curLat1 = convertToRadian(lat1)
151
+ const curLat2 = convertToRadian(lat2)
152
+ const a = Math.sin(dLat / 2) * Math.sin(dLat / 2) + Math.sin(dLon / 2) * Math.sin(dLon / 2) * Math.cos(curLat1) * Math.cos(curLat2)
153
+ const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a))
154
+ return R * c
155
+ }
154
156
 
155
157
  useEffect(() => {
156
158
  if (businessesList.businesses.length > 0) {
@@ -162,6 +164,7 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
162
164
  setFeaturedBusinesses(ary);
163
165
  }
164
166
  }, [businessesList.businesses]);
167
+
165
168
  // const resetInactivityTimeout = () => {
166
169
  // clearTimeout(timerId.current)
167
170
  // timerId.current = setInterval(() => {
@@ -173,21 +176,37 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
173
176
  // resetInactivityTimeout()
174
177
  // }, [])
175
178
 
179
+ const handleOnRefresh = () => {
180
+ const hasMore = !(
181
+ paginationProps.totalPages === paginationProps.currentPage
182
+ );
183
+ if (!businessesList.loading && hasMore) {
184
+ getBusinesses();
185
+ }
186
+ }
187
+
176
188
  useEffect(() => {
177
189
  Geolocation.getCurrentPosition((pos) => {
178
- const crd = pos.coords
179
- const distance = getDistance(crd.latitude, crd.longitude, orderState?.options?.address?.location?.lat, orderState?.options?.address?.location?.lng)
180
- if (distance > 20) setIsFarAway(true)
190
+ const crd = pos.coords
191
+ const distance = getDistance(crd.latitude, crd.longitude, orderState?.options?.address?.location?.lat, orderState?.options?.address?.location?.lng)
192
+ if (distance > 20) setIsFarAway(true)
181
193
  else setIsFarAway(false)
182
- }, (err) => {
183
- console.log(`ERROR(${err.code}): ${err.message}`)
184
- }, {
185
- enableHighAccuracy: true, timeout: 15000, maximumAge: 10000
186
- })
187
- }, [orderState?.options?.address?.location])
194
+ }, (err) => {
195
+ console.log(`ERROR(${err.code}): ${err.message}`)
196
+ }, {
197
+ enableHighAccuracy: true, timeout: 15000, maximumAge: 10000
198
+ })
199
+ }, [orderState?.options?.address?.location])
188
200
 
189
201
  return (
190
- <ScrollView style={styles.container} onScroll={(e) => handleScroll(e)} showsVerticalScrollIndicator={false}>
202
+ <ScrollView style={styles.container} onScroll={(e) => handleScroll(e)} showsVerticalScrollIndicator={false}
203
+ refreshControl={
204
+ <RefreshControl
205
+ refreshing={refreshing}
206
+ onRefresh={() => handleOnRefresh()}
207
+ />
208
+ }
209
+ >
191
210
  <HeaderWrapper
192
211
  source={theme.images.backgrounds.business_list_header}
193
212
  style={{ paddingTop: top + 20 }}>
@@ -257,72 +276,78 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
257
276
  />
258
277
  </WrapMomentOption>
259
278
 
260
- {!businessId && (
261
- <SearchBar
262
- onSearch={handleChangeSearch}
263
- searchValue={searchValue}
264
- lazyLoad
265
- isCancelXButtonShow={!!searchValue}
266
- borderStyle={styles.borderStyle}
267
- onCancel={() => handleChangeSearch('')}
268
- placeholder={t('SEARCH', 'Search')}
269
- height={26}
270
- inputStyle={{ ...styles.searchInput, ...Platform.OS === 'ios' ? {} : { paddingBottom: 4 } }}
271
- />
272
- )}
279
+ {!businessId && (
280
+ <SearchBar
281
+ onSearch={handleChangeSearch}
282
+ searchValue={searchValue}
283
+ lazyLoad
284
+ isCancelXButtonShow={!!searchValue}
285
+ borderStyle={styles.borderStyle}
286
+ onCancel={() => handleChangeSearch('')}
287
+ placeholder={t('SEARCH', 'Search')}
288
+ height={26}
289
+ inputStyle={{ ...styles.searchInput, ...Platform.OS === 'ios' ? {} : { paddingBottom: 4 } }}
290
+ />
291
+ )}
273
292
 
274
293
  </View>
275
294
  </OrderControlContainer>
276
295
  </HeaderWrapper>
277
- {isFocused && (
278
- <OrderProgressWrapper>
279
- <OrderProgress
280
- {...props}
281
- />
282
- </OrderProgressWrapper>
283
- )}
284
- {!businessId && !props.franchiseId && featuredBusiness && featuredBusiness.length > 0 && (
285
- <FeaturedWrapper>
286
- <OText size={16} style={{ marginLeft: 40 }} weight={Platform.OS === 'ios' ? '600' : 'bold'}>{t('FEATURED_BUSINESS', 'Featured business')}</OText>
287
- <ScrollView
288
- showsHorizontalScrollIndicator={false}
289
- nestedScrollEnabled
290
- horizontal contentContainerStyle={{ paddingHorizontal: 40 }}>
291
- {featuredBusiness.map((bAry: any, idx) => (
292
- <View key={'f-listing_' + idx}>
293
- <BusinessFeaturedController
294
- key={bAry[0].id}
295
- business={bAry[0]}
296
- handleCustomClick={handleBusinessClick}
297
- orderType={orderState?.options?.type}
298
- />
299
- {bAry.length > 1 && (
296
+ {
297
+ isFocused && (
298
+ <OrderProgressWrapper>
299
+ <OrderProgress
300
+ {...props}
301
+ />
302
+ </OrderProgressWrapper>
303
+ )
304
+ }
305
+ {
306
+ !businessId && !props.franchiseId && featuredBusiness && featuredBusiness.length > 0 && (
307
+ <FeaturedWrapper>
308
+ <OText size={16} style={{ marginLeft: 40 }} weight={Platform.OS === 'ios' ? '600' : 'bold'}>{t('FEATURED_BUSINESS', 'Featured business')}</OText>
309
+ <ScrollView
310
+ showsHorizontalScrollIndicator={false}
311
+ nestedScrollEnabled
312
+ horizontal contentContainerStyle={{ paddingHorizontal: 40 }}>
313
+ {featuredBusiness.map((bAry: any, idx) => (
314
+ <View key={'f-listing_' + idx}>
300
315
  <BusinessFeaturedController
301
- key={bAry[1].id}
302
- business={bAry[1]}
316
+ key={bAry[0].id}
317
+ business={bAry[0]}
303
318
  handleCustomClick={handleBusinessClick}
304
319
  orderType={orderState?.options?.type}
305
320
  />
306
- )}
307
- </View>
308
- ))}
309
- </ScrollView>
310
- </FeaturedWrapper>
311
- )}
321
+ {bAry.length > 1 && (
322
+ <BusinessFeaturedController
323
+ key={bAry[1].id}
324
+ business={bAry[1]}
325
+ handleCustomClick={handleBusinessClick}
326
+ orderType={orderState?.options?.type}
327
+ />
328
+ )}
329
+ </View>
330
+ ))}
331
+ </ScrollView>
332
+ </FeaturedWrapper>
333
+ )
334
+ }
312
335
  <View style={{ height: 8, backgroundColor: theme.colors.backgroundGray100 }} />
313
- {!businessId && !props.franchiseId && (
314
- <HighestRatedBusinesses onBusinessClick={handleBusinessClick} navigation={navigation} />
315
- )}
336
+ {
337
+ !businessId && !props.franchiseId && (
338
+ <HighestRatedBusinesses onBusinessClick={handleBusinessClick} navigation={navigation} />
339
+ )
340
+ }
316
341
  <View style={{ height: 8, backgroundColor: theme.colors.backgroundGray100 }} />
317
342
  <ListWrapper>
318
- {!businessId && (
319
- <BusinessTypeFilter
320
- images={props.images}
321
- businessTypes={props.businessTypes}
322
- defaultBusinessType={props.defaultBusinessType}
323
- handleChangeBusinessType={handleChangeBusinessType}
324
- />
325
- )}
343
+ {!businessId && (
344
+ <BusinessTypeFilter
345
+ images={props.images}
346
+ businessTypes={props.businessTypes}
347
+ defaultBusinessType={props.defaultBusinessType}
348
+ handleChangeBusinessType={handleChangeBusinessType}
349
+ />
350
+ )}
326
351
  {!businessesList.loading && businessesList.businesses.length === 0 && (
327
352
  <NotFoundSource
328
353
  content={t(
@@ -8,7 +8,7 @@ import {
8
8
  useValidationFields,
9
9
  } from 'ordering-components/native';
10
10
  import { useTheme } from 'styled-components/native';
11
- import { CContainer, CheckoutAction } from './styles';
11
+ import { CContainer, CheckoutAction, Divider } from './styles';
12
12
 
13
13
  import { OSBill, OSTable, OSCoupon, OSTotal, OSRow } from '../OrderSummary/styles';
14
14
 
@@ -23,6 +23,7 @@ import { ActivityIndicator, TouchableOpacity, View } from 'react-native';
23
23
  import AntIcon from 'react-native-vector-icons/AntDesign'
24
24
  import { TaxInformation } from '../TaxInformation';
25
25
  import { CartStoresListing } from '../CartStoresListing';
26
+ import { OAlert } from '../../../../../src/components/shared'
26
27
 
27
28
  const CartUI = (props: any) => {
28
29
  const {
@@ -36,7 +37,8 @@ const CartUI = (props: any) => {
36
37
  setIsCartsLoading,
37
38
  handleChangeComment,
38
39
  commentState,
39
- onNavigationRedirect
40
+ onNavigationRedirect,
41
+ handleRemoveOfferClick
40
42
  } = props
41
43
 
42
44
  const theme = useTheme();
@@ -50,7 +52,8 @@ const CartUI = (props: any) => {
50
52
  const [openUpselling, setOpenUpselling] = useState(false)
51
53
  const [openChangeStore, setOpenChangeStore] = useState(false)
52
54
  const [canOpenUpselling, setCanOpenUpselling] = useState(false)
53
- const [openTaxModal, setOpenTaxModal] = useState<any>({ open: false, data: null })
55
+ const [openTaxModal, setOpenTaxModal] = useState<any>({ open: false, data: null, type: '' })
56
+ const [confirm, setConfirm] = useState<any>({ open: false, content: null, handleOnAccept: null, id: null, title: null })
54
57
 
55
58
  const isCartPending = cart?.status === 2
56
59
  const isCouponEnabled = validationFields?.fields?.checkout?.coupon?.enabled
@@ -69,12 +72,12 @@ const CartUI = (props: any) => {
69
72
  const handleEditProduct = (product: any) => {
70
73
  onNavigationRedirect('ProductDetails', {
71
74
  businessId,
72
- isCartProduct: true,
75
+ isCartProduct: true,
73
76
  productCart: product,
74
77
  businessSlug: cart?.business?.slug,
75
78
  categoryId: product?.category_id,
76
79
  productId: product?.id,
77
- })
80
+ })
78
81
  }
79
82
 
80
83
  const handleClearProducts = async () => {
@@ -109,6 +112,22 @@ const CartUI = (props: any) => {
109
112
  }
110
113
  }
111
114
 
115
+ const getIncludedTaxesDiscounts = () => {
116
+ return cart?.taxes?.filter((tax: any) => tax?.type === 1)?.reduce((carry: number, tax: any) => carry + (tax?.summary?.tax_after_discount ?? tax?.summary?.tax), 0)
117
+ }
118
+
119
+ const onRemoveOffer = (id: number) => {
120
+ setConfirm({
121
+ open: true,
122
+ content: [t('QUESTION_DELETE_OFFER', 'Are you sure that you want to delete the offer?')],
123
+ title: t('OFFER', 'Offer'),
124
+ handleOnAccept: () => {
125
+ setConfirm({ ...confirm, open: false })
126
+ handleRemoveOfferClick(id)
127
+ }
128
+ })
129
+ }
130
+
112
131
  const walletName: any = {
113
132
  cash: {
114
133
  name: t('PAY_WITH_CASH_WALLET', 'Pay with Cash Wallet'),
@@ -166,7 +185,7 @@ const CartUI = (props: any) => {
166
185
  {parsePrice(cart?.subtotal + getIncludedTaxes())}
167
186
  </OText>
168
187
  </OSTable>
169
- {cart?.discount > 0 && cart?.total >= 0 && (
188
+ {cart?.discount > 0 && cart?.total >= 0 && cart?.offers?.length === 0 && (
170
189
  <OSTable>
171
190
  {cart?.discount_type === 1 ? (
172
191
  <OText size={12} lineHeight={18}>
@@ -179,19 +198,51 @@ const CartUI = (props: any) => {
179
198
  <OText size={12} lineHeight={18}>- {parsePrice(cart?.discount || 0)}</OText>
180
199
  </OSTable>
181
200
  )}
201
+ {
202
+ cart?.offers?.length > 0 && cart?.offers?.filter((offer: any) => offer?.target === 1)?.map((offer: any) => (
203
+ <OSTable key={offer.id}>
204
+ <OSRow>
205
+ <OText size={12} lineHeight={18}>{offer.name}</OText>
206
+ {offer.rate_type === 1 && (
207
+ <OText size={12} lineHeight={18}>{`(${verifyDecimals(offer?.rate, parsePrice)}%)`}</OText>
208
+ )}
209
+ <TouchableOpacity style={{ marginLeft: 3 }} onPress={() => setOpenTaxModal({ open: true, data: offer, type: 'offer_target_1' })}>
210
+ <AntIcon name='exclamationcircleo' size={18} color={theme.colors.primary} />
211
+ </TouchableOpacity>
212
+ <TouchableOpacity style={{ marginLeft: 3 }} onPress={() => onRemoveOffer(offer?.id)}>
213
+ <AntIcon name='closecircle' size={18} color={theme.colors.primary} />
214
+ </TouchableOpacity>
215
+ </OSRow>
216
+ <OText size={12} lineHeight={18}>
217
+ - {parsePrice(offer?.summary?.discount)}
218
+ </OText>
219
+ </OSTable>
220
+ ))
221
+ }
222
+ <Divider />
223
+ {cart?.subtotal_with_discount > 0 && cart?.discount > 0 && cart?.total >= 0 && (
224
+ <OSTable>
225
+ <OText size={12} lineHeight={18} numberOfLines={1}>{t('SUBTOTAL_WITH_DISCOUNT', 'Subtotal with discount')}</OText>
226
+ {cart?.business?.tax_type === 1 ? (
227
+ <OText size={12} lineHeight={18}>{parsePrice(cart?.subtotal_with_discount + getIncludedTaxesDiscounts() ?? 0)}</OText>
228
+ ) : (
229
+ <OText size={12} lineHeight={18}>{parsePrice(cart?.subtotal_with_discount ?? 0)}</OText>
230
+ )}
231
+ </OSTable>
232
+ )}
182
233
  {
183
234
  cart.taxes?.length > 0 && cart.taxes.filter((tax: any) => tax.type === 2 && tax?.rate !== 0).map((tax: any) => (
184
235
  <OSTable key={tax.id}>
185
236
  <OSRow>
186
- <OText numberOfLines={1} >
237
+ <OText size={12} lineHeight={18} numberOfLines={1} >
187
238
  {tax.name || t('INHERIT_FROM_BUSINESS', 'Inherit from business')}{' '}
188
239
  {`(${verifyDecimals(tax?.rate, parseNumber)}%)`}{' '}
189
240
  </OText>
190
- <TouchableOpacity onPress={() => setOpenTaxModal({ open: true, data: tax })} >
241
+ <TouchableOpacity onPress={() => setOpenTaxModal({ open: true, data: tax, type: 'tax' })} >
191
242
  <AntIcon name='exclamationcircleo' size={18} color={theme.colors.primary} />
192
243
  </TouchableOpacity>
193
244
  </OSRow>
194
- <OText>{parsePrice(tax?.summary?.tax || 0)}</OText>
245
+ <OText size={12} lineHeight={18}>{parsePrice(tax?.summary?.tax_after_discount ?? tax?.summary?.tax ?? 0)}</OText>
195
246
  </OSTable>
196
247
  ))
197
248
  }
@@ -199,33 +250,66 @@ const CartUI = (props: any) => {
199
250
  cart?.fees?.length > 0 && cart?.fees?.filter((fee: any) => !(fee.fixed === 0 && fee.percentage === 0)).map((fee: any) => (
200
251
  <OSTable key={fee?.id}>
201
252
  <OSRow>
202
- <OText numberOfLines={1} size={12} lineHeight={18}>
253
+ <OText size={12} lineHeight={18} numberOfLines={1}>
203
254
  {fee.name || t('INHERIT_FROM_BUSINESS', 'Inherit from business')}{' '}
204
255
  ({parsePrice(fee?.fixed)} + {fee?.percentage}%){' '}
205
256
  </OText>
206
- <TouchableOpacity onPress={() => setOpenTaxModal({ open: true, data: fee })} >
257
+ <TouchableOpacity onPress={() => setOpenTaxModal({ open: true, data: fee, type: 'fee' })} >
207
258
  <AntIcon name='exclamationcircleo' size={18} color={theme.colors.primary} />
208
259
  </TouchableOpacity>
209
260
  </OSRow>
210
- <OText>{parsePrice(fee?.summary?.fixed + fee?.summary?.percentage || 0)}</OText>
261
+ <OText size={12} lineHeight={18}>{parsePrice(fee?.summary?.fixed + (fee?.summary?.percentage_after_discount ?? fee?.summary?.percentage) ?? 0)}</OText>
262
+ </OSTable>
263
+ ))
264
+ }
265
+ {
266
+ cart?.offers?.length > 0 && cart?.offers?.filter((offer: any) => offer?.target === 3)?.map((offer: any) => (
267
+ <OSTable key={offer.id}>
268
+ <OSRow>
269
+ <OText size={12} lineHeight={18}>{offer.name}</OText>
270
+ {offer.rate_type === 1 && (
271
+ <OText size={12} lineHeight={18}>{`(${verifyDecimals(offer?.rate, parsePrice)}%)`}</OText>
272
+ )}
273
+ <TouchableOpacity style={{ marginLeft: 3 }} onPress={() => setOpenTaxModal({ open: true, data: offer, type: 'offer_target_3' })}>
274
+ <AntIcon name='exclamationcircleo' size={18} color={theme.colors.primary} />
275
+ </TouchableOpacity>
276
+ <TouchableOpacity style={{ marginLeft: 3 }} onPress={() => onRemoveOffer(offer?.id)}>
277
+ <AntIcon name='closecircle' size={18} color={theme.colors.primary} />
278
+ </TouchableOpacity>
279
+ </OSRow>
280
+ <OText size={12} lineHeight={18}>
281
+ - {parsePrice(offer?.summary?.discount)}
282
+ </OText>
211
283
  </OSTable>
212
284
  ))
213
285
  }
214
- {cart?.service_fee > 0 && !cart?.fees?.length && (
215
- <OSTable>
216
- <OText size={12} lineHeight={18}>
217
- {t('SERVICE_FEE', 'Service Fee')}
218
- {`(${verifyDecimals(cart?.business?.service_fee, parseNumber)}%)`}
219
- </OText>
220
- <OText size={12} lineHeight={18}>{parsePrice(cart?.service_fee)}</OText>
221
- </OSTable>
222
- )}
223
286
  {orderState?.options?.type === 1 && cart?.delivery_price > 0 && (
224
287
  <OSTable>
225
288
  <OText size={12} lineHeight={18}>{t('DELIVERY_FEE', 'Delivery Fee')}</OText>
226
289
  <OText size={12} lineHeight={18}>{parsePrice(cart?.delivery_price)}</OText>
227
290
  </OSTable>
228
291
  )}
292
+ {
293
+ cart?.offers?.length > 0 && cart?.offers?.filter((offer: any) => offer?.target === 2)?.map((offer: any) => (
294
+ <OSTable key={offer.id}>
295
+ <OSRow>
296
+ <OText size={12} lineHeight={18}>{offer.name}</OText>
297
+ {offer.rate_type === 1 && (
298
+ <OText size={12} lineHeight={18}>{`(${verifyDecimals(offer?.rate, parsePrice)}%)`}</OText>
299
+ )}
300
+ <TouchableOpacity style={{ marginLeft: 3 }} onPress={() => setOpenTaxModal({ open: true, data: offer, type: 'offer_target_2' })}>
301
+ <AntIcon name='exclamationcircleo' size={18} color={theme.colors.primary} />
302
+ </TouchableOpacity>
303
+ <TouchableOpacity style={{ marginLeft: 3 }} onPress={() => onRemoveOffer(offer?.id)}>
304
+ <AntIcon name='closecircle' size={18} color={theme.colors.primary} />
305
+ </TouchableOpacity>
306
+ </OSRow>
307
+ <OText size={12} lineHeight={18}>
308
+ - {parsePrice(offer?.summary?.discount)}
309
+ </OText>
310
+ </OSTable>
311
+ ))
312
+ }
229
313
  {cart?.driver_tip > 0 && (
230
314
  <OSTable>
231
315
  <OText size={12} lineHeight={18}>
@@ -265,7 +349,7 @@ const CartUI = (props: any) => {
265
349
  {t('TOTAL', 'Total')}
266
350
  </OText>
267
351
  <OText size={14} lineHeight={21} weight={'600'}>
268
- {parsePrice(cart?.balance ?? cart?.total)}
352
+ {parsePrice(cart?.total >= 0 ? cart?.total : 0)}
269
353
  </OText>
270
354
  </OSTable>
271
355
  </OSTotal>
@@ -339,11 +423,25 @@ const CartUI = (props: any) => {
339
423
  </OModal>
340
424
  <OModal
341
425
  open={openTaxModal.open}
342
- onClose={() => setOpenTaxModal({ open: false, data: null })}
426
+ onClose={() => setOpenTaxModal({ open: false, data: null, type: '' })}
343
427
  entireModal
428
+ title={`${openTaxModal.data?.name ||
429
+ t('INHERIT_FROM_BUSINESS', 'Inherit from business')} ${openTaxModal.data?.rate_type !== 2 ? `(${typeof openTaxModal.data?.rate === 'number' ? `${openTaxModal.data?.rate}%` : `${parsePrice(openTaxModal.data?.fixed ?? 0)} + ${openTaxModal.data?.percentage}%`})` : ''} `}
344
430
  >
345
- <TaxInformation data={openTaxModal.data} products={cart.products} />
431
+ <TaxInformation
432
+ type={openTaxModal.type}
433
+ data={openTaxModal.data}
434
+ products={cart?.products}
435
+ />
346
436
  </OModal>
437
+ <OAlert
438
+ open={confirm.open}
439
+ title={confirm.title}
440
+ content={confirm.content}
441
+ onAccept={confirm.handleOnAccept}
442
+ onCancel={() => setConfirm({ ...confirm, open: false, title: null })}
443
+ onClose={() => setConfirm({ ...confirm, open: false, title: null })}
444
+ />
347
445
  </CContainer>
348
446
  )
349
447
  }
@@ -1,4 +1,4 @@
1
- import styled, { css } from 'styled-components/native';
1
+ import styled from 'styled-components/native';
2
2
 
3
3
  export const CContainer = styled.View`
4
4
  /* border-bottom: 1px solid #F0F0F0; */
@@ -26,3 +26,10 @@ export const CheckoutAction = styled.View`
26
26
  margin-top: 10px;
27
27
  margin-bottom: 10px;
28
28
  `
29
+
30
+ export const Divider = styled.View`
31
+ border-color: #EAEAEA;
32
+ border-width: 1px;
33
+ margin-top: 5px;
34
+ margin-bottom: 10px;
35
+ `