ordering-ui-external 2.1.4 → 2.2.1

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 (120) hide show
  1. package/_bundles/0.ordering-ui.95882a524750766186cd.js +1 -0
  2. package/_bundles/{1.ordering-ui.28ae84b35994ed466773.js → 1.ordering-ui.95882a524750766186cd.js} +1 -1
  3. package/_bundles/{2.ordering-ui.28ae84b35994ed466773.js → 2.ordering-ui.95882a524750766186cd.js} +1 -1
  4. package/_bundles/4.ordering-ui.95882a524750766186cd.js +1 -0
  5. package/_bundles/{5.ordering-ui.28ae84b35994ed466773.js → 5.ordering-ui.95882a524750766186cd.js} +1 -1
  6. package/_bundles/{6.ordering-ui.28ae84b35994ed466773.js → 6.ordering-ui.95882a524750766186cd.js} +1 -1
  7. package/_bundles/{7.ordering-ui.28ae84b35994ed466773.js → 7.ordering-ui.95882a524750766186cd.js} +2 -2
  8. package/_bundles/{7.ordering-ui.28ae84b35994ed466773.js.LICENSE.txt → 7.ordering-ui.95882a524750766186cd.js.LICENSE.txt} +0 -0
  9. package/_bundles/{8.ordering-ui.28ae84b35994ed466773.js → 8.ordering-ui.95882a524750766186cd.js} +1 -1
  10. package/_bundles/{9.ordering-ui.28ae84b35994ed466773.js → 9.ordering-ui.95882a524750766186cd.js} +1 -1
  11. package/_bundles/{ordering-ui.28ae84b35994ed466773.js → ordering-ui.95882a524750766186cd.js} +2 -2
  12. package/_bundles/{ordering-ui.28ae84b35994ed466773.js.LICENSE.txt → ordering-ui.95882a524750766186cd.js.LICENSE.txt} +0 -0
  13. package/_modules/hooks/useIntersectionObserver.js +6 -5
  14. package/_modules/styles/Toast/index.js +4 -3
  15. package/_modules/themes/callcenterOriginal/src/components/Header/index.js +1 -1
  16. package/_modules/themes/five/src/components/AddressDetails/index.js +1 -1
  17. package/_modules/themes/five/src/components/AddressDetails/styles.js +1 -1
  18. package/_modules/themes/five/src/components/BusinessBasicInformation/styles.js +1 -1
  19. package/_modules/themes/five/src/components/BusinessItemAccordion/styles.js +1 -1
  20. package/_modules/themes/five/src/components/BusinessListingSearch/Accordion/index.js +43 -0
  21. package/_modules/themes/five/src/components/BusinessListingSearch/MaxSectionItem/index.js +16 -4
  22. package/_modules/themes/five/src/components/BusinessListingSearch/index.js +26 -13
  23. package/_modules/themes/five/src/components/BusinessListingSearch/styles.js +43 -41
  24. package/_modules/themes/five/src/components/BusinessPreorder/index.js +23 -4
  25. package/_modules/themes/five/src/components/BusinessPreorder/styles.js +38 -22
  26. package/_modules/themes/five/src/components/BusinessProductsList/layouts/groceries/styles.js +2 -2
  27. package/_modules/themes/five/src/components/BusinessProductsList/styles.js +1 -1
  28. package/_modules/themes/five/src/components/BusinessProductsListing/index.js +10 -1
  29. package/_modules/themes/five/src/components/BusinessesListing/layouts/OriginalBusinessesListing/index.js +23 -17
  30. package/_modules/themes/five/src/components/Cart/index.js +2 -1
  31. package/_modules/themes/five/src/components/Cart/styles.js +1 -1
  32. package/_modules/themes/five/src/components/Checkout/index.js +23 -18
  33. package/_modules/themes/five/src/components/Checkout/styles.js +1 -1
  34. package/_modules/themes/five/src/components/DriverTips/index.js +6 -2
  35. package/_modules/themes/five/src/components/Header/styles.js +2 -2
  36. package/_modules/themes/five/src/components/Help/index.js +1 -1
  37. package/_modules/themes/five/src/components/LastOrders/index.js +3 -8
  38. package/_modules/themes/five/src/components/MessagesListing/index.js +2 -2
  39. package/_modules/themes/five/src/components/MessagesListing/styles.js +1 -1
  40. package/_modules/themes/five/src/components/MultiCheckout/index.js +20 -8
  41. package/_modules/themes/five/src/components/MultiCheckout/styles.js +15 -13
  42. package/_modules/themes/five/src/components/MyOrders/index.js +1 -3
  43. package/_modules/themes/five/src/components/NotFoundSource/index.js +3 -11
  44. package/_modules/themes/five/src/components/NotFoundSource/styles.js +2 -2
  45. package/_modules/themes/five/src/components/OrderContextUI/index.js +2 -1
  46. package/_modules/themes/five/src/components/OrderContextUI/styles.js +14 -11
  47. package/_modules/themes/five/src/components/OrderProgress/index.js +4 -3
  48. package/_modules/themes/five/src/components/PageBanner/styles.js +1 -1
  49. package/_modules/themes/five/src/components/PaymentOptions/index.js +1 -1
  50. package/_modules/themes/five/src/components/ReviewProduct/styles.js +1 -1
  51. package/_modules/themes/five/src/components/ServiceForm/index.js +16 -11
  52. package/_modules/themes/five/src/components/ServiceForm/styles.js +16 -5
  53. package/_modules/themes/five/src/components/UserDetails/index.js +1 -1
  54. package/_modules/themes/five/src/components/UserDetails/styles.js +1 -1
  55. package/_modules/themes/five/src/components/UserFormDetails/index.js +1 -1
  56. package/_modules/themes/five/src/components/UserPopover/index.js +6 -0
  57. package/_modules/themes/five/src/components/UserProfileForm/index.js +0 -2
  58. package/_modules/themes/five/src/components/UserProfileForm/styles.js +1 -1
  59. package/_modules/themes/five/src/components/WalletTransactionItem/index.js +4 -2
  60. package/_modules/themes/five/src/components/Wallets/index.js +4 -4
  61. package/_modules/themes/five/src/components/Wallets/styles.js +33 -12
  62. package/_modules/themes/five/src/styles/Buttons/index.js +3 -1
  63. package/_modules/themes/pwa/src/components/MomentControl/index.js +7 -9
  64. package/_modules/utils/index.js +28 -2
  65. package/package.json +2 -2
  66. package/src/hooks/useIntersectionObserver.js +7 -6
  67. package/src/styles/Toast/index.js +4 -2
  68. package/src/themes/callcenterOriginal/src/components/Header/index.js +1 -2
  69. package/src/themes/five/src/components/AddressDetails/index.js +1 -1
  70. package/src/themes/five/src/components/AddressDetails/styles.js +4 -1
  71. package/src/themes/five/src/components/BusinessBasicInformation/styles.js +3 -1
  72. package/src/themes/five/src/components/BusinessItemAccordion/styles.js +9 -3
  73. package/src/themes/five/src/components/BusinessListingSearch/Accordion/index.js +23 -0
  74. package/src/themes/five/src/components/BusinessListingSearch/MaxSectionItem/index.js +28 -17
  75. package/src/themes/five/src/components/BusinessListingSearch/index.js +65 -66
  76. package/src/themes/five/src/components/BusinessListingSearch/styles.js +21 -2
  77. package/src/themes/five/src/components/BusinessPreorder/index.js +24 -0
  78. package/src/themes/five/src/components/BusinessPreorder/styles.js +11 -1
  79. package/src/themes/five/src/components/BusinessProductsList/layouts/groceries/styles.js +7 -3
  80. package/src/themes/five/src/components/BusinessProductsList/styles.js +3 -1
  81. package/src/themes/five/src/components/BusinessProductsListing/index.js +11 -1
  82. package/src/themes/five/src/components/BusinessesListing/layouts/OriginalBusinessesListing/index.js +11 -1
  83. package/src/themes/five/src/components/Cart/index.js +5 -1
  84. package/src/themes/five/src/components/Cart/styles.js +3 -1
  85. package/src/themes/five/src/components/Checkout/index.js +48 -61
  86. package/src/themes/five/src/components/Checkout/styles.js +3 -1
  87. package/src/themes/five/src/components/DriverTips/index.js +7 -2
  88. package/src/themes/five/src/components/Header/styles.js +4 -2
  89. package/src/themes/five/src/components/Help/index.js +0 -1
  90. package/src/themes/five/src/components/LastOrders/index.js +25 -28
  91. package/src/themes/five/src/components/MessagesListing/index.js +2 -2
  92. package/src/themes/five/src/components/MessagesListing/styles.js +3 -1
  93. package/src/themes/five/src/components/MultiCheckout/index.js +34 -14
  94. package/src/themes/five/src/components/MultiCheckout/styles.js +9 -0
  95. package/src/themes/five/src/components/MyOrders/index.js +0 -3
  96. package/src/themes/five/src/components/NotFoundSource/index.js +5 -10
  97. package/src/themes/five/src/components/NotFoundSource/styles.js +7 -2
  98. package/src/themes/five/src/components/OrderContextUI/index.js +1 -1
  99. package/src/themes/five/src/components/OrderContextUI/styles.js +4 -2
  100. package/src/themes/five/src/components/OrderProgress/index.js +8 -2
  101. package/src/themes/five/src/components/PageBanner/styles.js +1 -0
  102. package/src/themes/five/src/components/PaymentOptions/index.js +1 -1
  103. package/src/themes/five/src/components/ReviewProduct/styles.js +3 -3
  104. package/src/themes/five/src/components/ServiceForm/index.js +20 -14
  105. package/src/themes/five/src/components/ServiceForm/styles.js +11 -3
  106. package/src/themes/five/src/components/UserDetails/index.js +2 -2
  107. package/src/themes/five/src/components/UserDetails/styles.js +3 -1
  108. package/src/themes/five/src/components/UserFormDetails/index.js +0 -1
  109. package/src/themes/five/src/components/UserPopover/index.js +2 -0
  110. package/src/themes/five/src/components/UserProfileForm/index.js +0 -3
  111. package/src/themes/five/src/components/UserProfileForm/styles.js +0 -5
  112. package/src/themes/five/src/components/WalletTransactionItem/index.js +4 -1
  113. package/src/themes/five/src/components/Wallets/index.js +101 -95
  114. package/src/themes/five/src/components/Wallets/styles.js +37 -17
  115. package/src/themes/five/src/styles/Buttons/index.js +4 -0
  116. package/src/themes/pwa/src/components/MomentControl/index.js +6 -11
  117. package/src/utils/index.js +38 -12
  118. package/template/pages/Home/index.js +3 -0
  119. package/_bundles/0.ordering-ui.28ae84b35994ed466773.js +0 -1
  120. package/_bundles/4.ordering-ui.28ae84b35994ed466773.js +0 -1
@@ -134,19 +134,24 @@ const ServiceFormUI = (props) => {
134
134
  handleSave(values)
135
135
  }
136
136
 
137
+ const getMomentTime = (time) => {
138
+ const _moment = moment(`${moment(selectDate).format('YYYY-MM-DD')} ${time}`, 'YYYY-MM-DD HH:mm').toDate()
139
+ return _moment
140
+ }
141
+
137
142
  const handleChangeTime = (time) => {
138
143
  if (!time || time === timeSelected) return
139
- const _moment = moment(`${moment(selectDate).format('YYYY-MM-DD')} ${time}`, 'YYYY-MM-DD HH:mm').toDate()
144
+ const _moment = getMomentTime(time)
140
145
  setTimeSelected(time)
141
146
  setDateSelected(_moment)
142
147
  }
143
148
 
144
- const isBusyTime = (professional) => {
145
- if (!dateSelected) return false
146
- const startDay = moment(dateSelected).utc().format('d')
149
+ const isBusyTime = (professional, selectedMoment) => {
150
+ if (!selectedMoment) return false
151
+ const startDay = moment(selectedMoment).utc().format('d')
147
152
  const isStartScheduleEnabled = professional?.schedule?.[startDay]?.enabled
148
153
  const duration = product?.duration ?? 0
149
- const endDay = moment(dateSelected).add(duration - 1, 'minutes').utc().format('d')
154
+ const endDay = moment(selectedMoment).add(duration - 1, 'minutes').utc().format('d')
150
155
  const isEndScheduleEnabled = professional?.schedule?.[endDay]?.enabled
151
156
  if (!isStartScheduleEnabled || !isEndScheduleEnabled) return true
152
157
 
@@ -156,10 +161,10 @@ const ServiceFormUI = (props) => {
156
161
  ? professional?.busy_times.filter(item => !(item.start === productCart?.calendar_event?.start && item.end === productCart?.calendar_event?.end))
157
162
  : [...professional?.busy_times]
158
163
  const valid = busyTimes.some(item => {
159
- return (moment.utc(item?.start).local().valueOf() <= moment(dateSelected).valueOf() &&
160
- moment(dateSelected).valueOf() < moment.utc(item?.end).local().valueOf()) ||
161
- (moment.utc(item?.start).local().valueOf() <= moment(dateSelected).add(duration, 'minutes').valueOf() &&
162
- moment(dateSelected).add(duration, 'minutes').valueOf() < moment.utc(item?.end).local().valueOf())
164
+ return (moment.utc(item?.start).local().valueOf() <= moment(selectedMoment).valueOf() &&
165
+ moment(selectedMoment).valueOf() < moment.utc(item?.end).local().valueOf()) ||
166
+ (moment.utc(item?.start).local().valueOf() < moment(selectedMoment).add(duration, 'minutes').valueOf() &&
167
+ moment(selectedMoment).add(duration, 'minutes').valueOf() < moment.utc(item?.end).local().valueOf())
163
168
  })
164
169
  return valid
165
170
  }
@@ -317,8 +322,8 @@ const ServiceFormUI = (props) => {
317
322
  ) : <FaUserAlt />}
318
323
  <NameWrapper>
319
324
  <p>{currentProfessional?.name} {currentProfessional?.lastname}</p>
320
- <StatusInfo available={!isBusyTime(currentProfessional)}>
321
- {isBusyTime(currentProfessional) ? (
325
+ <StatusInfo available={!isBusyTime(currentProfessional, dateSelected)}>
326
+ {isBusyTime(currentProfessional, dateSelected) ? (
322
327
  <>
323
328
  <span className='status'>{t('BUSY_ON_SELECTED_TIME', 'Busy on selected time')}</span>
324
329
  </>
@@ -350,8 +355,8 @@ const ServiceFormUI = (props) => {
350
355
  ) : <FaUserAlt />}
351
356
  <NameWrapper>
352
357
  <p>{professional?.name} {professional?.lastname}</p>
353
- <StatusInfo available={!isBusyTime(professional)}>
354
- {isBusyTime(professional) ? (
358
+ <StatusInfo available={!isBusyTime(professional, dateSelected)}>
359
+ {isBusyTime(professional, dateSelected) ? (
355
360
  <>
356
361
  <span className='status'>{t('BUSY_ON_SELECTED_TIME', 'Busy on selected time')}</span>
357
362
  </>
@@ -435,6 +440,7 @@ const ServiceFormUI = (props) => {
435
440
  <TimeItem
436
441
  key={i}
437
442
  active={timeSelected === time.value}
443
+ disabled={isBusyTime(currentProfessional, getMomentTime(time.value))}
438
444
  onClick={() => handleChangeTime(time.value)}
439
445
  >
440
446
  <span>{time.text}</span>
@@ -463,7 +469,7 @@ const ServiceFormUI = (props) => {
463
469
  <Button
464
470
  onClick={() => handleAddProduct()}
465
471
  color='primary'
466
- disabled={isBusyTime(currentProfessional)}
472
+ disabled={isBusyTime(currentProfessional, dateSelected)}
467
473
  >
468
474
  {t('BOOK', 'Book')}
469
475
  </Button>
@@ -421,7 +421,9 @@ export const TimeItem = styled.div`
421
421
  display: flex;
422
422
  justify-content: center;
423
423
  align-items: center;
424
- background: ${props => props.theme.colors.gray200};
424
+ background: ${props => props.theme.colors.primaryContrast};
425
+ border: 1px solid transparent;
426
+ color: ${props => props.theme.colors.primary};
425
427
  border-radius: 7.6px;
426
428
  padding: 5px 15px;
427
429
  margin: 12px;
@@ -431,8 +433,14 @@ export const TimeItem = styled.div`
431
433
  user-select: none;
432
434
 
433
435
  ${({ active }) => active && css`
434
- background: ${props => props.theme.colors.primaryContrast};
435
- color: ${props => props.theme.colors.primary};
436
+ background: ${props => props.theme.colors.primary};
437
+ color: ${props => props.theme.colors.primaryContrast};
438
+ border: 1px solid ${props => props.theme.colors.primary};
439
+ `}
440
+
441
+ ${({ disabled }) => disabled && css`
442
+ background: ${props => props.theme.colors.gray200};
443
+ color: ${props => props.theme.colors.lightGray};
436
444
  `}
437
445
 
438
446
  span {
@@ -167,7 +167,7 @@ const UserDetailsUI = (props) => {
167
167
  )}
168
168
  {cartStatus !== 2 && (
169
169
  !isEdit ? (
170
- <span onClick={() => toggleIsEdit()}>{t('CHANGE', 'Change')}</span>
170
+ <span onClick={() => toggleIsEdit()}>{t('CHANGE_USER_DETAILS', 'Change customer details')}</span>
171
171
  ) : (
172
172
  <FcCancel className='cancel' onClick={() => toggleEditState()} />
173
173
  )
@@ -190,7 +190,7 @@ const UserDetailsUI = (props) => {
190
190
  <CountryFlag>
191
191
  {
192
192
  userData?.country_phone_code && (
193
- <PhoneInput onChange={() => {}} defaultCountry={parsePhoneNumber(`+${(userData?.country_phone_code?.replace('+', ''))} ${userData?.cellphone}`)?.country} />
193
+ <PhoneInput onChange={() => { }} defaultCountry={parsePhoneNumber(`+${(userData?.country_phone_code?.replace('+', ''))} ${userData?.cellphone}`)?.country} />
194
194
  )
195
195
  }
196
196
  </CountryFlag>
@@ -30,9 +30,11 @@ export const Header = styled.div`
30
30
  span {
31
31
  font-size: 13px;
32
32
  color: ${props => props.theme.colors.primary};
33
- text-decoration: underline;
34
33
  cursor: pointer;
35
34
  user-select: none;
35
+ &:hover {
36
+ text-decoration: underline;
37
+ }
36
38
  }
37
39
  `
38
40
 
@@ -300,7 +300,6 @@ export const UserFormDetailsUI = (props) => {
300
300
  props.beforeMidComponents?.map((BeforeMidComponents, i) => (
301
301
  <BeforeMidComponents key={i} {...props} />))
302
302
  }
303
- {!requiredFields && <Divider />}
304
303
  {sortInputFields({ values: validationFields?.fields?.checkout }).map(field =>
305
304
  showField && showField(field.code) && showFieldWithTheme(field.code) && (
306
305
  <React.Fragment key={field.id}>
@@ -194,6 +194,7 @@ export const UserPopover = (props) => {
194
194
 
195
195
  const LogoutActionUI = (props) => {
196
196
  const [, t] = useLanguage()
197
+ const [events] = useEvent()
197
198
  const [, { deleteUserCustomer }] = useCustomer()
198
199
 
199
200
  const handleClick = () => {
@@ -210,6 +211,7 @@ const LogoutActionUI = (props) => {
210
211
  deleteUserCustomer(true)
211
212
  props.handleLogoutClick()
212
213
  props.onClose && props.onClose()
214
+ events.emit('go_to_page', { page: 'home' })
213
215
  }
214
216
  return (
215
217
  <PopoverListItem onClick={handleClick}>
@@ -232,9 +232,6 @@ const UserProfileFormUI = (props) => {
232
232
  </React.Fragment>))}
233
233
  {props.beforeComponents?.map((BeforeComponent, i) => (
234
234
  <BeforeComponent key={i} {...props} />))}
235
- {!isHiddenAddress && !props.hideOptions && (
236
- <ProfileOptions value='account' />
237
- )}
238
235
  <Container>
239
236
  <UserProfileContainer mbottom={isHiddenAddress && 25}>
240
237
  {showCustomerPicture && (
@@ -10,11 +10,6 @@ export const UserProfileContainer = styled.div`
10
10
  text-align: center;
11
11
  width: 90%;
12
12
  margin: 25px auto ${props => props.mbottom ? `${props.mbottom}px` : 'auto'};
13
-
14
- @media (min-width: 768px) {
15
- align-items: flex-start;
16
- flex-direction: row;
17
- }
18
13
  `
19
14
 
20
15
  export const ProfileOptionsList = styled.div`
@@ -26,6 +26,9 @@ export const WalletTransactionItem = (props) => {
26
26
  ? `:author ${item?.amount >= 0 ? 'Add' : 'Reduce'} money in Order No. :order_id`
27
27
  : `:author ${item?.amount >= 0 ? 'Add' : 'Reduce'} money`
28
28
 
29
+ const itemDescription = item?.description?.split(' ')
30
+ const order_id = itemDescription?.pop() ?? ''
31
+
29
32
  return (
30
33
  <Container>
31
34
  <Dot isTop={idx === 0} />
@@ -49,7 +52,7 @@ export const WalletTransactionItem = (props) => {
49
52
  </MessageBlock>
50
53
  {!!item?.description && (
51
54
  <DescriptionBlock>
52
- <span>{item?.description}</span>
55
+ <span>{`${t('ACCUMULATION_CREDIT_POINT_BY_ORDER', itemDescription?.join(' ') ?? 'Accumulation credit point by order')} ${order_id}`}</span>
53
56
  </DescriptionBlock>
54
57
  )}
55
58
  {!!item?.code && (
@@ -16,13 +16,16 @@ import {
16
16
  WrapContent,
17
17
  Transactions,
18
18
  LoyaltyContent,
19
- LoyaltyWrapp
19
+ LoyaltyWrapp,
20
+ Title,
21
+ TabsContainer,
22
+ Tab
20
23
  } from './styles'
21
24
 
22
25
  import { WalletTransactionItem } from '../WalletTransactionItem'
23
- import { NotFoundSource } from '../../../../../components/NotFoundSource'
24
- import { Tabs, Tab } from '../../styles/Tabs'
26
+ import { Tabs } from '../../styles/Tabs'
25
27
  import { GiftCardUI } from '../GiftCard/GiftCardUI'
28
+ import { NotFoundSource } from '../NotFoundSource'
26
29
 
27
30
  const WalletsUI = (props) => {
28
31
  const {
@@ -69,99 +72,102 @@ const WalletsUI = (props) => {
69
72
  !userLoyaltyLevel.loading &&
70
73
  !walletList.error &&
71
74
  walletList.wallets?.length > 0 &&
72
- (
73
- <>
74
- <Tabs variant='primary' className='tabs'>
75
- {walletList.wallets?.map(wallet => walletName[wallet.type]?.isActive && (
76
- <Tab
77
- key={wallet.id}
78
- active={tabSelected === wallet.type}
79
- onClick={() => handleChangeTab(wallet)}
80
- borderBottom
81
- className='tab_title'
82
- >
83
- {walletName[wallet.type]?.name}
84
- </Tab>
85
- ))}
86
- </Tabs>
87
-
88
- <WrapContent>
89
- <Transactions isLoyaltyLevel={!!loyaltyLevel}>
90
- <SectionWrapper>
91
- <BalanceElement>
92
- <h1>
93
- {
94
- currentWalletSelected?.type === 'cash'
95
- ? parsePrice(currentWalletSelected?.balance)
96
- : currentWalletSelected?.balance
97
- }
98
- </h1>
99
- <span>
100
- {currentWalletSelected?.type === 'cash'
101
- ? configs?.stripe_currency?.value
102
- : t('POINTS', 'Points')}
103
- </span>
104
- </BalanceElement>
105
- </SectionWrapper>
106
- <GiftCardUI />
107
- <div className='transactions_list'>
108
- {!transactionsList?.loading && transactionsList.list?.[`wallet:${currentWalletSelected?.id}`]?.length > 0 && (
109
- <>
110
- <h2 style={{ fontSize: 20 }}>{t('TRANSACTIONS_HISTORY', 'Transactions history')}</h2>
111
- <TransactionsWrapper>
112
- {transactionsList.list?.[`wallet:${currentWalletSelected?.id}`]?.map((transaction, i) => (
113
- <WalletTransactionItem
114
- idx={i}
115
- type={currentWalletSelected?.type}
116
- key={transaction.id}
117
- item={transaction}
118
- />
75
+ (
76
+ <>
77
+ <Title>{t('WALLETS', 'Wallets')}</Title>
78
+ <TabsContainer>
79
+ <Tabs variant='primary' className='tabs'>
80
+ {walletList.wallets?.map(wallet => walletName[wallet.type]?.isActive && (
81
+ <Tab
82
+ key={wallet.id}
83
+ active={tabSelected === wallet.type}
84
+ onClick={() => handleChangeTab(wallet)}
85
+ borderBottom
86
+ className='tab_title'
87
+ >
88
+ {walletName[wallet.type]?.name}
89
+ </Tab>
90
+ ))}
91
+ </Tabs>
92
+ </TabsContainer>
93
+
94
+ <WrapContent>
95
+ <Transactions isLoyaltyLevel={!!loyaltyLevel}>
96
+ <SectionWrapper>
97
+ <BalanceElement>
98
+ <h1>
99
+ {
100
+ currentWalletSelected?.type === 'cash'
101
+ ? parsePrice(currentWalletSelected?.balance)
102
+ : currentWalletSelected?.balance
103
+ }
104
+ </h1>
105
+ <span>
106
+ {currentWalletSelected?.type === 'cash'
107
+ ? configs?.stripe_currency?.value
108
+ : t('POINTS', 'Points')}
109
+ </span>
110
+ </BalanceElement>
111
+ </SectionWrapper>
112
+ <GiftCardUI />
113
+ <div className='transactions_list'>
114
+ {!transactionsList?.loading && transactionsList.list?.[`wallet:${currentWalletSelected?.id}`]?.length > 0 && (
115
+ <>
116
+ <h2 style={{ fontSize: 20 }}>{t('TRANSACTIONS_HISTORY', 'Transactions history')}</h2>
117
+ <TransactionsWrapper>
118
+ {transactionsList.list?.[`wallet:${currentWalletSelected?.id}`]?.map((transaction, i) => (
119
+ <WalletTransactionItem
120
+ idx={i}
121
+ type={currentWalletSelected?.type}
122
+ key={transaction.id}
123
+ item={transaction}
124
+ />
125
+ ))}
126
+ </TransactionsWrapper>
127
+ </>
128
+ )}
129
+
130
+ {transactionsList?.loading && (
131
+ <>
132
+ {[...Array(8).keys()].map(i => (
133
+ <SectionWrapper key={i} isLoading>
134
+ <Skeleton height={40} />
135
+ </SectionWrapper>
119
136
  ))}
120
- </TransactionsWrapper>
121
- </>
122
- )}
123
-
124
- {transactionsList?.loading && (
125
- <>
126
- {[...Array(8).keys()].map(i => (
127
- <SectionWrapper key={i} isLoading>
128
- <Skeleton height={40} />
129
- </SectionWrapper>
130
- ))}
131
- </>
132
- )}
133
-
134
- {!transactionsList?.loading &&
135
- (transactionsList?.error || !transactionsList.list?.[`wallet:${currentWalletSelected?.id}`]?.length) &&
136
- (
137
- <NotFoundSource
138
- content={
139
- transactionsList?.error
140
- ? t('ERROR_NOT_FOUND_TRANSACTIONS', 'Sorry, an error has occurred')
141
- : t('NOT_FOUND_TRANSACTIONS', 'No transactions to show at this time.')
142
- }
143
- />
144
- )}
145
- </div>
146
- </Transactions>
147
-
148
- {!!loyaltyLevel && tabSelected === 'credit_point' && (
149
- <LoyaltyContent>
150
- <LoyaltyWrapp>
151
- <span className='loyalty_title'>
152
- {t('LOYALTY_LEVEL_TITLE', 'Your level is')}:
153
- </span>
154
- <img src={loyaltyLevel.image ?? theme.images.dummies.loyaltyLevel} />
155
- <span className='loyalty_name'>
156
- {loyaltyLevel.name}
157
- </span>
158
- </LoyaltyWrapp>
159
- </LoyaltyContent>
160
- )}
161
- </WrapContent>
162
-
163
- </>
164
- )}
137
+ </>
138
+ )}
139
+
140
+ {!transactionsList?.loading &&
141
+ (transactionsList?.error || !transactionsList.list?.[`wallet:${currentWalletSelected?.id}`]?.length) &&
142
+ (
143
+ <NotFoundSource
144
+ content={
145
+ transactionsList?.error
146
+ ? t('ERROR_NOT_FOUND_TRANSACTIONS', 'Sorry, an error has occurred')
147
+ : t('NOT_FOUND_TRANSACTIONS', 'No transactions to show at this time.')
148
+ }
149
+ />
150
+ )}
151
+ </div>
152
+ </Transactions>
153
+
154
+ {!!loyaltyLevel && tabSelected === 'credit_point' && (
155
+ <LoyaltyContent>
156
+ <LoyaltyWrapp>
157
+ <span className='loyalty_title'>
158
+ {t('LOYALTY_LEVEL_TITLE', 'Your level is')}:
159
+ </span>
160
+ <img src={loyaltyLevel.image ?? theme.images.dummies.loyaltyLevel} />
161
+ <span className='loyalty_name'>
162
+ {loyaltyLevel.name}
163
+ </span>
164
+ </LoyaltyWrapp>
165
+ </LoyaltyContent>
166
+ )}
167
+ </WrapContent>
168
+
169
+ </>
170
+ )}
165
171
 
166
172
  {(walletList?.loading || userLoyaltyLevel.loading) && (
167
173
  <>
@@ -1,29 +1,49 @@
1
1
  import styled, { css } from 'styled-components'
2
2
 
3
3
  export const Container = styled.div`
4
- padding: 20px;
4
+ width: 100%;
5
5
  display: flex;
6
6
  flex-direction: column;
7
+ margin: 0 auto;
8
+ padding: 30px 15px 15px 15px;
9
+ box-sizing: border-box;
10
+ min-height: calc(100vh - 280px);
7
11
 
8
- .tabs{
9
- justify-content: space-between;
10
- }
11
- .tab_title {
12
- padding: 10px 2px;
12
+ @media (min-width: 768px) {
13
+ width: 70%;
13
14
  }
15
+ `
14
16
 
15
- @media (min-width: 576px) {
16
- .tabs{
17
- justify-content: flex-start;
18
- }
19
- .tab_title {
20
- padding: 10px 15px;
21
- }
22
- }
17
+ export const Title = styled.h1`
18
+ font-weight: 600;
19
+ font-size: 32px;
20
+ margin-bottom: 30px;
21
+ margin-top: 0;
22
+ `
23
23
 
24
- @media (min-width: 768px) {
25
- padding: 20px 60px;
26
- }
24
+ export const TabsContainer = styled.div`
25
+ border-bottom: 1px solid ${props => props.theme.colors.gray200};
26
+ `
27
+
28
+ export const Tab = styled.div`
29
+ padding: 10px 0px;
30
+ margin-right: 30px;
31
+ cursor: pointer;
32
+
33
+ ${props => props.theme.rtl && css`
34
+ margin-right: 0px;
35
+ margin-left: 30px;
36
+ `}
37
+
38
+ ${({ active }) => active && css`
39
+ ${({ borderBottom }) => borderBottom && css`
40
+ border-bottom: 1px solid;
41
+ `}
42
+ `}
43
+
44
+ ${({ active }) => !active && css`
45
+ color: ${props => props.theme.colors.darkGray};
46
+ `}
27
47
  `
28
48
 
29
49
  export const SectionWrapper = styled.div`
@@ -23,6 +23,10 @@ export const Button = styled.button`
23
23
  }
24
24
  ${({ bgtransparent }) => bgtransparent && css`
25
25
  background: transparent !important;
26
+ &:hover {
27
+ background: ${darken(0.15, '#CCC')};
28
+ color: ${props => darken(0.15, props.theme.colors.primary)} !important;
29
+ }
26
30
  `}
27
31
  ${({ initialIcon }) => initialIcon && css`
28
32
  text-align: left;
@@ -27,6 +27,7 @@ import {
27
27
  import CgRadioCheck from '@meronex/icons/cg/CgRadioCheck'
28
28
  import CgRadioChecked from '@meronex/icons/cg/CgRadioChecked'
29
29
  import BiTimeFive from '@meronex/icons/bi/BiTimeFive'
30
+ import { calendarLanguages } from '../../../../../utils'
30
31
 
31
32
  const MomentControlUI = (props) => {
32
33
  const {
@@ -67,18 +68,13 @@ const MomentControlUI = (props) => {
67
68
  setIsASP(true)
68
69
  } else setIsASP(false)
69
70
  }
70
-
71
71
  const handleRemoveDate = () => {
72
72
  !orderState.loading && handleAsap()
73
73
  setIsASP(true)
74
74
  }
75
75
 
76
- const formatMonthYear = (date) => {
77
- return moment(date).format('MMMM')
78
- }
79
-
80
- const formatShortWeekday = (date) => {
81
- return moment(date).format('dd')
76
+ const formatWeekMonth = (obj, date) => {
77
+ return obj === 'month' ? t(calendarLanguages.months[moment(date).format('MMMM')], moment(date).format('MMMM')) : t(calendarLanguages.week[moment(date).format('dd')], moment(date).format('dd'))
82
78
  }
83
79
 
84
80
  const formatDay = (date) => {
@@ -133,7 +129,6 @@ const MomentControlUI = (props) => {
133
129
  }
134
130
  }, [hoursList])
135
131
 
136
-
137
132
  return (
138
133
  <div id='moment_control'>
139
134
  {props.beforeElements?.map((BeforeElement, i) => (
@@ -149,7 +144,7 @@ const MomentControlUI = (props) => {
149
144
  isLoading={orderState?.loading}
150
145
  >
151
146
  {isASP ? <CgRadioChecked /> : <CgRadioCheck />}
152
- <span>{t('CHECKOUT_ASAP', 'ASAP')} ({moment(new Date()).format('LLLL')} - {t('DELIVERY_TIME', 'delivery time')})</span>
147
+ <span>{t('CHECKOUT_ASAP', 'ASAP') + ` (${t(moment().format('dddd')?.toLocaleUpperCase(), moment().format('dddd'))}, ${t(calendarLanguages.months[moment().format('MMMM')], moment().format('MMMM'))}${moment().format(' D, yyyy h:mm A')} - ${t('DELIVERY_TIME', 'delivery time')})`}</span>
153
148
  </CheckBoxWrapper>
154
149
  <CheckBoxWrapper
155
150
  highlight={!isASP}
@@ -183,8 +178,8 @@ const MomentControlUI = (props) => {
183
178
  nextLabel={<MdKeyboardArrowRight />}
184
179
  minDate={minDate}
185
180
  maxDate={maxDate}
186
- formatMonthYear={(locale, date) => formatMonthYear(date)}
187
- formatShortWeekday={(locale, date) => formatShortWeekday(date)}
181
+ formatMonthYear={(locale, date) => formatWeekMonth('month', date)}
182
+ formatShortWeekday={(locale, date) => formatWeekMonth('week', date)}
188
183
  formatDay={(locale, date) => formatDay(date)}
189
184
  calendarType='US'
190
185
  />
@@ -136,21 +136,21 @@ export const bytesConverter = bytes => {
136
136
  */
137
137
  export const lightenDarkenColor = (color) => {
138
138
 
139
- let r, g, b, hsp;
139
+ let r, g, b, hsp
140
140
  if (color.match(/^rgb/)) {
141
141
  // If HEX --> store the red, green, blue values in separate variables
142
- color = color.match(/^rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*(\d+(?:\.\d+)?))?\)$/);
142
+ color = color.match(/^rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*(\d+(?:\.\d+)?))?\)$/)
143
143
 
144
- r = color[1];
145
- g = color[2];
146
- b = color[3];
144
+ r = color[1]
145
+ g = color[2]
146
+ b = color[3]
147
147
  } else {
148
148
  // If RGB --> Convert it to HEX
149
- color = +("0x" + color.slice(1).replace(color.length < 5 && /./g, '$&$&'));
149
+ color = +("0x" + color.slice(1).replace(color.length < 5 && /./g, '$&$&'))
150
150
 
151
- r = color >> 16;
152
- g = color >> 8 & 255;
153
- b = color & 255;
151
+ r = color >> 16
152
+ g = color >> 8 & 255
153
+ b = color & 255
154
154
  }
155
155
 
156
156
  // HSP (Highly Sensitive Poo) equation
@@ -158,13 +158,13 @@ export const lightenDarkenColor = (color) => {
158
158
  0.299 * (r * r) +
159
159
  0.587 * (g * g) +
160
160
  0.114 * (b * b)
161
- );
161
+ )
162
162
 
163
163
  // Using the HSP value, determine whether the color is light or dark
164
164
  if (hsp > 197) {
165
- return true; //is light color
165
+ return true //is light color
166
166
  } else {
167
- return false;
167
+ return false
168
168
  }
169
169
  }
170
170
 
@@ -650,3 +650,29 @@ export const getOrderStatus = (s) => {
650
650
  const objectStatus = orderStatus.find((o) => o.key === status)
651
651
  return objectStatus && objectStatus
652
652
  }
653
+
654
+ export const calendarLanguages = {
655
+ months: {
656
+ January: 'MONTH1',
657
+ February: 'MONTH2',
658
+ March: 'MONTH3',
659
+ April: 'MONTH4',
660
+ May: 'MONTH5',
661
+ June: 'MONTH6',
662
+ July: 'MONTH7',
663
+ August: 'MONTH8',
664
+ September: 'MONTH9',
665
+ October: 'MONTH10',
666
+ November: 'MONTH11',
667
+ December: 'MONTH12'
668
+ },
669
+ week: {
670
+ Mo: 'DAYMIN1',
671
+ Tu: 'DAYMIN2',
672
+ We: 'DAYMIN3',
673
+ Th: 'DAYMIN4',
674
+ Fr: 'DAYMIN5',
675
+ Sa: 'DAYMIN6',
676
+ Su: 'DAYMIN7'
677
+ }
678
+ }