ordering-ui-external 2.1.3 → 2.2.0

package/src/themes/five/src/components/NotFoundSource/styles.js

@@ -10,7 +10,8 @@ export const NotFound = styled.div`
   margin: 20px auto;
 
   h1 {
-    font-size: 14px;
+    font-size: 20px;
+    opacity: 0.5;
     line-height: 24px;
     text-align: center;
     color: ${props => props.theme.colors?.headingColor};
@@ -24,7 +25,11 @@ export const NotFound = styled.div`
 `
 
 export const NotFoundImage = styled.div`
-  max-width: 300px;
+  svg {
+    width: 150px;
+    height: 120px;
+    opacity: 0.5;
+  }
 `
 
 export const ButtonWrapper = styled.div`

package/src/themes/five/src/components/OrderContextUI/index.js

@@ -67,7 +67,7 @@ export const OrderContextUI = (props) => {
 
   return (
     <>
-      <Container isBusinessList={isBusinessList}>
+      <Container isBusinessList={isBusinessList} hero={props.hideHero} >
         <AddressMenu
           onClick={() => handleClickAddress()}
           isCheckOut={isCheckOut}

package/src/themes/five/src/components/OrderContextUI/styles.js

@@ -2,12 +2,14 @@ import styled, { css } from 'styled-components'
 
 export const Container = styled.div`
   ${({ isBusinessList }) => isBusinessList && css`
-    position: absolute;
-    top: 10%;
     width: 100%;
     padding: 0 15px;
     box-sizing: border-box;
   `}
+  ${({ hero }) => hero && css`
+    position: absolute;
+    top: 10%;
+  `}
   margin-top: 10px;
 `
 

package/src/themes/five/src/components/PageBanner/styles.js

@@ -41,6 +41,7 @@ export const BannerContainer = styled.div`
   }
 `
 export const ImageWrapper = styled.div`
+  cursor: pointer;
   width: 100%;
   padding-top: 260px;
   position: relative;

package/src/themes/five/src/components/ReviewProduct/styles.js

@@ -94,10 +94,10 @@ export const AddCommentHideShow = styled.p`
   transition: all 0.3s linear;
   color: #909BA9;
   font-size: 13px;
-
   &:hover {
-    color: ${props => props.theme?.colors.primary};
-  }
+        text-decoration: underline;
+        color: ${props => props.theme?.colors.primary};
+      }
   
   ${({ active }) => active && css`
     color: ${props => props.theme?.colors.primary};

package/src/themes/five/src/components/ServiceForm/index.js

@@ -134,19 +134,24 @@ const ServiceFormUI = (props) => {
     handleSave(values)
   }
 
+  const getMomentTime = (time) => {
+    const _moment = moment(`${moment(selectDate).format('YYYY-MM-DD')} ${time}`, 'YYYY-MM-DD HH:mm').toDate()
+    return _moment
+  }
+
   const handleChangeTime = (time) => {
     if (!time || time === timeSelected) return
-    const _moment = moment(`${moment(selectDate).format('YYYY-MM-DD')} ${time}`, 'YYYY-MM-DD HH:mm').toDate()
+    const _moment = getMomentTime(time)
     setTimeSelected(time)
     setDateSelected(_moment)
   }
 
-  const isBusyTime = (professional) => {
-    if (!dateSelected) return false
-    const startDay = moment(dateSelected).utc().format('d')
+  const isBusyTime = (professional, selectedMoment) => {
+    if (!selectedMoment) return false
+    const startDay = moment(selectedMoment).utc().format('d')
     const isStartScheduleEnabled = professional?.schedule?.[startDay]?.enabled
     const duration = product?.duration ?? 0
-    const endDay = moment(dateSelected).add(duration - 1, 'minutes').utc().format('d')
+    const endDay = moment(selectedMoment).add(duration - 1, 'minutes').utc().format('d')
     const isEndScheduleEnabled = professional?.schedule?.[endDay]?.enabled
     if (!isStartScheduleEnabled || !isEndScheduleEnabled) return true
 
@@ -156,10 +161,10 @@ const ServiceFormUI = (props) => {
       ? professional?.busy_times.filter(item => !(item.start === productCart?.calendar_event?.start && item.end === productCart?.calendar_event?.end))
       : [...professional?.busy_times]
     const valid = busyTimes.some(item => {
-      return (moment.utc(item?.start).local().valueOf() <= moment(dateSelected).valueOf() &&
-        moment(dateSelected).valueOf() < moment.utc(item?.end).local().valueOf()) ||
-        (moment.utc(item?.start).local().valueOf() <= moment(dateSelected).add(duration, 'minutes').valueOf() &&
-        moment(dateSelected).add(duration, 'minutes').valueOf() < moment.utc(item?.end).local().valueOf())
+      return (moment.utc(item?.start).local().valueOf() <= moment(selectedMoment).valueOf() &&
+        moment(selectedMoment).valueOf() < moment.utc(item?.end).local().valueOf()) ||
+        (moment.utc(item?.start).local().valueOf() < moment(selectedMoment).add(duration, 'minutes').valueOf() &&
+        moment(selectedMoment).add(duration, 'minutes').valueOf() < moment.utc(item?.end).local().valueOf())
     })
     return valid
   }
@@ -317,8 +322,8 @@ const ServiceFormUI = (props) => {
                       ) : <FaUserAlt />}
                       <NameWrapper>
                         <p>{currentProfessional?.name} {currentProfessional?.lastname}</p>
-                        <StatusInfo available={!isBusyTime(currentProfessional)}>
-                          {isBusyTime(currentProfessional) ? (
+                        <StatusInfo available={!isBusyTime(currentProfessional, dateSelected)}>
+                          {isBusyTime(currentProfessional, dateSelected) ? (
                             <>
                               <span className='status'>{t('BUSY_ON_SELECTED_TIME', 'Busy on selected time')}</span>
                             </>
@@ -350,8 +355,8 @@ const ServiceFormUI = (props) => {
                           ) : <FaUserAlt />}
                           <NameWrapper>
                             <p>{professional?.name} {professional?.lastname}</p>
-                            <StatusInfo available={!isBusyTime(professional)}>
-                              {isBusyTime(professional) ? (
+                            <StatusInfo available={!isBusyTime(professional, dateSelected)}>
+                              {isBusyTime(professional, dateSelected) ? (
                                 <>
                                   <span className='status'>{t('BUSY_ON_SELECTED_TIME', 'Busy on selected time')}</span>
                                 </>
@@ -435,6 +440,7 @@ const ServiceFormUI = (props) => {
                           <TimeItem
                             key={i}
                             active={timeSelected === time.value}
+                            disabled={isBusyTime(currentProfessional, getMomentTime(time.value))}
                             onClick={() => handleChangeTime(time.value)}
                           >
                             <span>{time.text}</span>
@@ -463,7 +469,7 @@ const ServiceFormUI = (props) => {
                 <Button
                   onClick={() => handleAddProduct()}
                   color='primary'
-                  disabled={isBusyTime(currentProfessional)}
+                  disabled={isBusyTime(currentProfessional, dateSelected)}
                 >
                   {t('BOOK', 'Book')}
                 </Button>

package/src/themes/five/src/components/ServiceForm/styles.js

@@ -421,7 +421,9 @@ export const TimeItem = styled.div`
   display: flex;
   justify-content: center;
   align-items: center;
-  background: ${props => props.theme.colors.gray200};
+  background: ${props => props.theme.colors.primaryContrast};
+  border: 1px solid transparent;
+  color: ${props => props.theme.colors.primary};
   border-radius: 7.6px;
   padding: 5px 15px;
   margin: 12px;
@@ -431,8 +433,14 @@ export const TimeItem = styled.div`
   user-select: none;
 
   ${({ active }) => active && css`
-    background: ${props => props.theme.colors.primaryContrast};
-    color: ${props => props.theme.colors.primary};
+    background: ${props => props.theme.colors.primary};
+    color: ${props => props.theme.colors.primaryContrast};
+    border: 1px solid ${props => props.theme.colors.primary};
+  `}
+
+  ${({ disabled }) => disabled && css`
+    background: ${props => props.theme.colors.gray200};
+    color: ${props => props.theme.colors.lightGray};
   `}
 
   span {

package/src/themes/five/src/components/UserDetails/index.js

@@ -167,7 +167,7 @@ const UserDetailsUI = (props) => {
               )}
               {cartStatus !== 2 && (
                 !isEdit ? (
-                  <span onClick={() => toggleIsEdit()}>{t('CHANGE', 'Change')}</span>
+                  <span onClick={() => toggleIsEdit()}>{t('CHANGE_USER_DETAILS', 'Change customer details')}</span>
                 ) : (
                   <FcCancel className='cancel' onClick={() => toggleEditState()} />
                 )
@@ -190,7 +190,7 @@ const UserDetailsUI = (props) => {
                   <CountryFlag>
                     {
                       userData?.country_phone_code && (
-                        <PhoneInput onChange={() => {}} defaultCountry={parsePhoneNumber(`+${(userData?.country_phone_code?.replace('+', ''))} ${userData?.cellphone}`)?.country} />
+                        <PhoneInput onChange={() => { }} defaultCountry={parsePhoneNumber(`+${(userData?.country_phone_code?.replace('+', ''))} ${userData?.cellphone}`)?.country} />
                       )
                     }
                   </CountryFlag>

package/src/themes/five/src/components/UserDetails/styles.js

@@ -30,9 +30,11 @@ export const Header = styled.div`
   span {
     font-size: 13px;
     color: ${props => props.theme.colors.primary};
-    text-decoration: underline;
     cursor: pointer;
     user-select: none;
+    &:hover {
+        text-decoration: underline;
+      }
   }
 `
 

package/src/themes/five/src/components/UserFormDetails/index.js

@@ -300,7 +300,6 @@ export const UserFormDetailsUI = (props) => {
               props.beforeMidComponents?.map((BeforeMidComponents, i) => (
                 <BeforeMidComponents key={i} {...props} />))
             }
-            {!requiredFields && <Divider />}
             {sortInputFields({ values: validationFields?.fields?.checkout }).map(field =>
               showField && showField(field.code) && showFieldWithTheme(field.code) && (
                 <React.Fragment key={field.id}>

package/src/themes/five/src/components/UserPopover/index.js

@@ -194,6 +194,7 @@ export const UserPopover = (props) => {
 
 const LogoutActionUI = (props) => {
   const [, t] = useLanguage()
+  const [events] = useEvent()
   const [, { deleteUserCustomer }] = useCustomer()
 
   const handleClick = () => {
@@ -210,6 +211,7 @@ const LogoutActionUI = (props) => {
     deleteUserCustomer(true)
     props.handleLogoutClick()
     props.onClose && props.onClose()
+    events.emit('go_to_page', { page: 'home' })
   }
   return (
     <PopoverListItem onClick={handleClick}>

package/src/themes/five/src/components/UserProfileForm/index.js

@@ -232,9 +232,6 @@ const UserProfileFormUI = (props) => {
         </React.Fragment>))}
       {props.beforeComponents?.map((BeforeComponent, i) => (
         <BeforeComponent key={i} {...props} />))}
-      {!isHiddenAddress && !props.hideOptions && (
-        <ProfileOptions value='account' />
-      )}
       <Container>
         <UserProfileContainer mbottom={isHiddenAddress && 25}>
           {showCustomerPicture && (

package/src/themes/five/src/components/UserProfileForm/styles.js

@@ -10,11 +10,6 @@ export const UserProfileContainer = styled.div`
   text-align: center;
   width: 90%;
   margin: 25px auto ${props => props.mbottom ? `${props.mbottom}px` : 'auto'};
-
-  @media (min-width: 768px) {
-    align-items: flex-start;
-    flex-direction: row;
-  }
 `
 
 export const ProfileOptionsList = styled.div`

package/src/themes/five/src/components/WalletTransactionItem/index.js

@@ -26,6 +26,9 @@ export const WalletTransactionItem = (props) => {
     ? `:author ${item?.amount >= 0 ? 'Add' : 'Reduce'} money in Order No. :order_id`
     : `:author ${item?.amount >= 0 ? 'Add' : 'Reduce'} money`
 
+  const itemDescription = item?.description?.split(' ')
+  const order_id = itemDescription?.pop() ?? ''
+
   return (
     <Container>
       <Dot isTop={idx === 0} />
@@ -49,7 +52,7 @@ export const WalletTransactionItem = (props) => {
       </MessageBlock>
       {!!item?.description && (
         <DescriptionBlock>
-          <span>{item?.description}</span>
+          <span>{`${t('ACCUMULATION_CREDIT_POINT_BY_ORDER', itemDescription?.join(' ') ?? 'Accumulation credit point by order')} ${order_id}`}</span>
         </DescriptionBlock>
       )}
       {!!item?.code && (

package/src/themes/five/src/components/Wallets/index.js

@@ -16,13 +16,16 @@ import {
   WrapContent,
   Transactions,
   LoyaltyContent,
-  LoyaltyWrapp
+  LoyaltyWrapp,
+  Title,
+  TabsContainer,
+  Tab
 } from './styles'
 
 import { WalletTransactionItem } from '../WalletTransactionItem'
-import { NotFoundSource } from '../../../../../components/NotFoundSource'
-import { Tabs, Tab } from '../../styles/Tabs'
+import { Tabs } from '../../styles/Tabs'
 import { GiftCardUI } from '../GiftCard/GiftCardUI'
+import { NotFoundSource } from '../NotFoundSource'
 
 const WalletsUI = (props) => {
   const {
@@ -69,99 +72,102 @@ const WalletsUI = (props) => {
         !userLoyaltyLevel.loading &&
         !walletList.error &&
         walletList.wallets?.length > 0 &&
-      (
-        <>
-          <Tabs variant='primary' className='tabs'>
-            {walletList.wallets?.map(wallet => walletName[wallet.type]?.isActive && (
-              <Tab
-                key={wallet.id}
-                active={tabSelected === wallet.type}
-                onClick={() => handleChangeTab(wallet)}
-                borderBottom
-                className='tab_title'
-              >
-                {walletName[wallet.type]?.name}
-              </Tab>
-            ))}
-          </Tabs>
-
-          <WrapContent>
-            <Transactions isLoyaltyLevel={!!loyaltyLevel}>
-              <SectionWrapper>
-                <BalanceElement>
-                  <h1>
-                    {
-                      currentWalletSelected?.type === 'cash'
-                        ? parsePrice(currentWalletSelected?.balance)
-                        : currentWalletSelected?.balance
-                    }
-                  </h1>
-                  <span>
-                    {currentWalletSelected?.type === 'cash'
-                      ? configs?.stripe_currency?.value
-                      : t('POINTS', 'Points')}
-                  </span>
-                </BalanceElement>
-              </SectionWrapper>
-              <GiftCardUI />
-              <div className='transactions_list'>
-                {!transactionsList?.loading && transactionsList.list?.[`wallet:${currentWalletSelected?.id}`]?.length > 0 && (
-                  <>
-                    <h2 style={{ fontSize: 20 }}>{t('TRANSACTIONS_HISTORY', 'Transactions history')}</h2>
-                    <TransactionsWrapper>
-                      {transactionsList.list?.[`wallet:${currentWalletSelected?.id}`]?.map((transaction, i) => (
-                        <WalletTransactionItem
-                          idx={i}
-                          type={currentWalletSelected?.type}
-                          key={transaction.id}
-                          item={transaction}
-                        />
+        (
+          <>
+            <Title>{t('WALLETS', 'Wallets')}</Title>
+            <TabsContainer>
+              <Tabs variant='primary' className='tabs'>
+                {walletList.wallets?.map(wallet => walletName[wallet.type]?.isActive && (
+                  <Tab
+                    key={wallet.id}
+                    active={tabSelected === wallet.type}
+                    onClick={() => handleChangeTab(wallet)}
+                    borderBottom
+                    className='tab_title'
+                  >
+                    {walletName[wallet.type]?.name}
+                  </Tab>
+                ))}
+              </Tabs>
+            </TabsContainer>
+
+            <WrapContent>
+              <Transactions isLoyaltyLevel={!!loyaltyLevel}>
+                <SectionWrapper>
+                  <BalanceElement>
+                    <h1>
+                      {
+                        currentWalletSelected?.type === 'cash'
+                          ? parsePrice(currentWalletSelected?.balance)
+                          : currentWalletSelected?.balance
+                      }
+                    </h1>
+                    <span>
+                      {currentWalletSelected?.type === 'cash'
+                        ? configs?.stripe_currency?.value
+                        : t('POINTS', 'Points')}
+                    </span>
+                  </BalanceElement>
+                </SectionWrapper>
+                <GiftCardUI />
+                <div className='transactions_list'>
+                  {!transactionsList?.loading && transactionsList.list?.[`wallet:${currentWalletSelected?.id}`]?.length > 0 && (
+                    <>
+                      <h2 style={{ fontSize: 20 }}>{t('TRANSACTIONS_HISTORY', 'Transactions history')}</h2>
+                      <TransactionsWrapper>
+                        {transactionsList.list?.[`wallet:${currentWalletSelected?.id}`]?.map((transaction, i) => (
+                          <WalletTransactionItem
+                            idx={i}
+                            type={currentWalletSelected?.type}
+                            key={transaction.id}
+                            item={transaction}
+                          />
+                        ))}
+                      </TransactionsWrapper>
+                    </>
+                  )}
+
+                  {transactionsList?.loading && (
+                    <>
+                      {[...Array(8).keys()].map(i => (
+                        <SectionWrapper key={i} isLoading>
+                          <Skeleton height={40} />
+                        </SectionWrapper>
                       ))}
-                    </TransactionsWrapper>
-                  </>
-                )}
-
-                {transactionsList?.loading && (
-                  <>
-                    {[...Array(8).keys()].map(i => (
-                      <SectionWrapper key={i} isLoading>
-                        <Skeleton height={40} />
-                      </SectionWrapper>
-                    ))}
-                  </>
-                )}
-
-                {!transactionsList?.loading &&
-                  (transactionsList?.error || !transactionsList.list?.[`wallet:${currentWalletSelected?.id}`]?.length) &&
-                (
-                  <NotFoundSource
-                    content={
-                      transactionsList?.error
-                        ? t('ERROR_NOT_FOUND_TRANSACTIONS', 'Sorry, an error has occurred')
-                        : t('NOT_FOUND_TRANSACTIONS', 'No transactions to show at this time.')
-                    }
-                  />
-                )}
-              </div>
-            </Transactions>
-
-            {!!loyaltyLevel && tabSelected === 'credit_point' && (
-              <LoyaltyContent>
-                <LoyaltyWrapp>
-                  <span className='loyalty_title'>
-                    {t('LOYALTY_LEVEL_TITLE', 'Your level is')}:
-                  </span>
-                  <img src={loyaltyLevel.image ?? theme.images.dummies.loyaltyLevel} />
-                  <span className='loyalty_name'>
-                    {loyaltyLevel.name}
-                  </span>
-                </LoyaltyWrapp>
-              </LoyaltyContent>
-            )}
-          </WrapContent>
-
-        </>
-      )}
+                    </>
+                  )}
+
+                  {!transactionsList?.loading &&
+                    (transactionsList?.error || !transactionsList.list?.[`wallet:${currentWalletSelected?.id}`]?.length) &&
+                    (
+                      <NotFoundSource
+                        content={
+                          transactionsList?.error
+                            ? t('ERROR_NOT_FOUND_TRANSACTIONS', 'Sorry, an error has occurred')
+                            : t('NOT_FOUND_TRANSACTIONS', 'No transactions to show at this time.')
+                        }
+                      />
+                    )}
+                </div>
+              </Transactions>
+
+              {!!loyaltyLevel && tabSelected === 'credit_point' && (
+                <LoyaltyContent>
+                  <LoyaltyWrapp>
+                    <span className='loyalty_title'>
+                      {t('LOYALTY_LEVEL_TITLE', 'Your level is')}:
+                    </span>
+                    <img src={loyaltyLevel.image ?? theme.images.dummies.loyaltyLevel} />
+                    <span className='loyalty_name'>
+                      {loyaltyLevel.name}
+                    </span>
+                  </LoyaltyWrapp>
+                </LoyaltyContent>
+              )}
+            </WrapContent>
+
+          </>
+        )}
 
       {(walletList?.loading || userLoyaltyLevel.loading) && (
         <>

package/src/themes/five/src/components/Wallets/styles.js

@@ -1,29 +1,49 @@
 import styled, { css } from 'styled-components'
 
 export const Container = styled.div`
-  padding: 20px;
+  width: 100%;
   display: flex;
   flex-direction: column;
+  margin: 0 auto;
+  padding: 30px 15px 15px 15px;
+  box-sizing: border-box;
+  min-height: calc(100vh - 280px);
 
-  .tabs{
-    justify-content: space-between;
-  }
-  .tab_title {
-    padding: 10px 2px;
+  @media (min-width: 768px) {
+    width: 70%;
   }
+`
 
-  @media (min-width: 576px) {
-    .tabs{
-      justify-content: flex-start;
-    }
-    .tab_title {
-      padding: 10px 15px;
-    }
-  }
+export const Title = styled.h1`
+  font-weight: 600;
+  font-size: 32px;
+  margin-bottom: 30px;
+  margin-top: 0;
+`
 
-  @media (min-width: 768px) {
-    padding: 20px 60px;
-  }
+export const TabsContainer = styled.div`
+  border-bottom: 1px solid ${props => props.theme.colors.gray200};
+`
+
+export const Tab = styled.div`
+  padding: 10px 0px;
+  margin-right: 30px;
+  cursor: pointer;
+
+  ${props => props.theme.rtl && css`
+    margin-right: 0px;
+    margin-left: 30px;
+  `}
+
+  ${({ active }) => active && css`
+    ${({ borderBottom }) => borderBottom && css`
+      border-bottom: 1px solid;
+    `}
+  `}
+
+  ${({ active }) => !active && css`
+    color: ${props => props.theme.colors.darkGray};
+  `}
 `
 
 export const SectionWrapper = styled.div`

package/src/themes/five/src/styles/Buttons/index.js

@@ -23,6 +23,10 @@ export const Button = styled.button`
   }
   ${({ bgtransparent }) => bgtransparent && css`
       background: transparent !important;
+      &:hover {
+        background: ${darken(0.15, '#CCC')};
+        color: ${props => darken(0.15, props.theme.colors.primary)} !important;
+      }
   `}
   ${({ initialIcon }) => initialIcon && css`
     text-align: left;

package/src/themes/pwa/src/components/MomentControl/index.js

@@ -27,6 +27,7 @@ import {
 import CgRadioCheck from '@meronex/icons/cg/CgRadioCheck'
 import CgRadioChecked from '@meronex/icons/cg/CgRadioChecked'
 import BiTimeFive from '@meronex/icons/bi/BiTimeFive'
+import { calendarLanguages } from '../../../../../utils'
 
 const MomentControlUI = (props) => {
   const {
@@ -67,18 +68,13 @@ const MomentControlUI = (props) => {
       setIsASP(true)
     } else setIsASP(false)
   }
-
   const handleRemoveDate = () => {
     !orderState.loading && handleAsap()
     setIsASP(true)
   }
 
-  const formatMonthYear = (date) => {
-    return moment(date).format('MMMM')
-  }
-
-  const formatShortWeekday = (date) => {
-    return moment(date).format('dd')
+  const formatWeekMonth = (obj, date) => {
+    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'))
   }
 
   const formatDay = (date) => {
@@ -133,7 +129,6 @@ const MomentControlUI = (props) => {
     }
   }, [hoursList])
 
-
   return (
     <div id='moment_control'>
       {props.beforeElements?.map((BeforeElement, i) => (
@@ -149,7 +144,7 @@ const MomentControlUI = (props) => {
         isLoading={orderState?.loading}
       >
         {isASP ? <CgRadioChecked /> : <CgRadioCheck />}
-        <span>{t('CHECKOUT_ASAP', 'ASAP')} ({moment(new Date()).format('LLLL')} - {t('DELIVERY_TIME', 'delivery time')})</span>
+        <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>
       </CheckBoxWrapper>
       <CheckBoxWrapper
         highlight={!isASP}
@@ -183,8 +178,8 @@ const MomentControlUI = (props) => {
                 nextLabel={<MdKeyboardArrowRight />}
                 minDate={minDate}
                 maxDate={maxDate}
-                formatMonthYear={(locale, date) => formatMonthYear(date)}
-                formatShortWeekday={(locale, date) => formatShortWeekday(date)}
+                formatMonthYear={(locale, date) => formatWeekMonth('month', date)}
+                formatShortWeekday={(locale, date) => formatWeekMonth('week', date)}
                 formatDay={(locale, date) => formatDay(date)}
                 calendarType='US'
               />