ordering-ui-external 1.6.8 → 1.7.0

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

@@ -43,6 +43,7 @@ import SwiperCore, {
 } from 'swiper'
 import 'swiper/swiper-bundle.min.css'
 import 'swiper/swiper.min.css'
+import { getTimes } from '../../../../../utils'
 
 SwiperCore.use([Navigation])
 
@@ -92,58 +93,17 @@ const BusinessPreorderUI = (props) => {
     setIsEnabled(menu.schedule[day].enabled || false)
   }
 
-  const getTimes = (curdate, menu) => {
+  const getTimeList = (curdate, menu) => {
     validateSelectedDate(curdate, menu)
-    const date = new Date()
     const dateParts = curdate.split('-')
     const dateSeleted = new Date(dateParts[0], dateParts[1] - 1, dateParts[2])
-    var times = []
-    for (var k = 0; k < menu.schedule[dateSeleted.getDay()].lapses.length; k++) {
-      var open = {
-        hour: menu.schedule[dateSeleted.getDay()].lapses[k].open.hour,
-        minute: menu.schedule[dateSeleted.getDay()].lapses[k].open.minute
-      }
-      var close = {
-        hour: menu.schedule[dateSeleted.getDay()].lapses[k].close.hour,
-        minute: menu.schedule[dateSeleted.getDay()].lapses[k].close.minute
-      }
-      for (var i = open.hour; i <= close.hour; i++) {
-        if (date.getDate() !== dateSeleted.getDate() || i >= date.getHours()) {
-          let hour = ''
-          let meridian = ''
-          if (!is12Hours) hour = i < 10 ? '0' + i : i
-          else {
-            if (i === 0) {
-              hour = '12'
-              meridian = ' ' + t('AM', 'AM')
-            } else if (i > 0 && i < 12) {
-              hour = (i < 10 ? '0' + i : i)
-              meridian = ' ' + t('AM', 'AM')
-            } else if (i === 12) {
-              hour = '12'
-              meridian = ' ' + t('PM', 'PM')
-            } else {
-              hour = ((i - 12 < 10) ? '0' + (i - 12) : (i - 12))
-              meridian = ' ' + t('PM', 'PM')
-            }
-          }
-          for (let j = (i === open.hour ? open.minute : 0); j <= (i === close.hour ? close.minute : 59); j += 15) {
-            if (i !== date.getHours() || j >= date.getMinutes() || date.getDate() !== dateSeleted.getDate()) {
-              times.push({
-                text: hour + ':' + (j < 10 ? '0' + j : j) + meridian,
-                value: (i < 10 ? '0' + i : i) + ':' + (j < 10 ? '0' + j : j)
-              })
-            }
-          }
-        }
-      }
-    }
+    const times = getTimes(dateSeleted, menu?.schedule, is12Hours)
     return times
   }
 
   useEffect(() => {
     const selectedMenu = menu ? (menu?.use_business_schedule ? business : menu) : business
-    const _times = getTimes(dateSelected, selectedMenu)
+    const _times = getTimeList(dateSelected, selectedMenu)
     setTimeList(_times)
   }, [dateSelected, menu, business])
 
@@ -219,13 +179,13 @@ const BusinessPreorderUI = (props) => {
                 preventClicksPropagation={false}
               >
                 {
-                  datesList.slice(0, Number(maxDays || configs?.max_days_preorder?.value || 6, 10)).map(date => {
+                  datesList.slice(0, Number(maxDays || configs?.max_days_preorder?.value || 6, 10)).map((date, i) => {
                     const dateParts = date.split('-')
                     const _date = new Date(dateParts[0], dateParts[1] - 1, dateParts[2])
                     const dayName = t('DAY' + (_date.getDay() >= 1 ? _date.getDay() : 7)).substring(0, 2)
                     const dayNumber = (_date.getDate() < 10 ? '0' : '') + _date.getDate()
                     return (
-                      <SwiperSlide key={dayNumber}>
+                      <SwiperSlide key={i}>
                         <Day selected={dateSelected === date} onClick={() => handleChangeDate(date)}>
                           <DayName>{dayName}</DayName>
                           <DayNumber>{dayNumber}</DayNumber>

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

@@ -225,7 +225,7 @@ const BusinessProductsListingUI = (props) => {
     return () => {
       events.off('change_view', handleChangePage)
     }
-  }, [openProduct])
+  }, [])
 
   useEffect(() => {
     window.addEventListener('scroll', handleScroll)

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

@@ -15,6 +15,7 @@ import {
   useCustomer,
   useEvent
 } from 'ordering-components-external'
+import { useWindowSize } from '../../../../../hooks/useWindowSize'
 import { UpsellingPage } from '../UpsellingPage'
 import parsePhoneNumber from 'libphonenumber-js'
 import { useHistory } from 'react-router-dom'
@@ -41,7 +42,8 @@ import {
   WalletPaymentOptionContainer,
   CartHeader,
   SelectSpotContainer,
-  WrapperActionsInput
+  WrapperActionsInput,
+  MobileWrapperPlaceOrderButton
 } from './styles'
 
 import { Button } from '../../styles/Buttons'
@@ -101,6 +103,7 @@ const CheckoutUI = (props) => {
   const [customerState] = useCustomer()
   const [events] = useEvent()
   const history = useHistory()
+  const windowSize = useWindowSize()
 
   const [errorCash, setErrorCash] = useState(false)
   const [userErrors, setUserErrors] = useState([])
@@ -214,6 +217,12 @@ const CheckoutUI = (props) => {
     setUserErrors(errors)
   }
 
+  const handleScrollTo = () => {
+    if (!((!paymethodSelected && cart?.balance > 0) && cart?.status !== 2)) return
+    const scrollElement = document.querySelector('.paymentsContainer')
+    window.scrollTo(0, scrollElement.offsetTop - 20);
+  }
+
   useEffect(() => {
     if (validationFields && validationFields?.fields?.checkout) {
       checkValidationFields()
@@ -375,7 +384,7 @@ const CheckoutUI = (props) => {
           )}
 
           {!cartState.loading && cart && (
-            <PaymentMethodContainer>
+            <PaymentMethodContainer className='paymentsContainer'>
               <h1>{t('PAYMENT_METHODS', 'Payment Methods')}</h1>
               {!cartState.loading && cart?.status === 4 && (
                 <WarningMessage style={{ marginTop: 20 }}>
@@ -474,7 +483,7 @@ const CheckoutUI = (props) => {
           </CartContainer>
         )}
 
-        {!cartState.loading && cart && cart?.status !== 2 && (
+        {windowSize.width >= 576 && !cartState.loading && cart && cart?.status !== 2 && (
           <WrapperPlaceOrderButton>
             <Button
               color={(!cart?.valid_maximum || (!cart?.valid_minimum && !(cart?.discount_type === 1 && cart?.discount_rate === 100))) ? 'secundary' : 'primary'}
@@ -523,6 +532,22 @@ const CheckoutUI = (props) => {
           </WarningText>
         )}
       </WrapperRightContainer>
+      {windowSize.width < 576 && !cartState.loading && cart && cart?.status !== 2 && (
+        <MobileWrapperPlaceOrderButton>
+          <span>{parsePrice(cart?.total)}</span>
+          <Button
+              color={(!cart?.valid_maximum || (!cart?.valid_minimum && !(cart?.discount_type === 1 && cart?.discount_rate === 100))) ? 'secundary' : 'primary'}
+              // disabled={isDisablePlaceOrderButton}
+              onClick={() => isDisablePlaceOrderButton ? handleScrollTo('.paymentsContainer') : handlePlaceOrder()}
+            >
+              {!cart?.valid_maximum ? (
+                `${t('MAXIMUM_SUBTOTAL_ORDER', 'Maximum subtotal order')}: ${parsePrice(cart?.maximum)}`
+              ) : (!cart?.valid_minimum && !(cart?.discount_type === 1 && cart?.discount_rate === 100)) ? (
+                `${t('MINIMUN_SUBTOTAL_ORDER', 'Minimum subtotal order:')} ${parsePrice(cart?.minimum)}`
+              ) : placing ? t('PLACING', 'Placing') : t('PLACE_ORDER', 'Place Order')}
+            </Button>
+          </MobileWrapperPlaceOrderButton>
+      )}
       <Alert
         title={t('CUSTOMER_DETAILS', 'Customer Details')}
         content={alertState.content}

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

@@ -289,3 +289,33 @@ export const WrapperActionsInput = styled.div`
     font-size: 20px;
   }
 `
+
+export const MobileWrapperPlaceOrderButton = styled.div`
+  position: fixed;
+  width: 100vw;
+  left: 0;
+  bottom: 0;
+  background-color: white;
+  padding: 15px 25px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  box-sizing: border-box;
+  z-index: 1006;
+  box-shadow: 0px 4px 10px rgb(0 0 0 / 12%);
+
+  span {
+    font-weight: 600;
+    font-size: 16px;
+
+    @media (min-width: 1200px) {
+      font-size: 18px;
+      padding-left: 20px;
+    }
+  }
+
+  button {
+    min-height: 44px;
+    border-radius: 7.6px;
+  }
+`

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

@@ -4,7 +4,7 @@ import { useLocation } from 'react-router-dom'
 import { useSession, useLanguage, useOrder, useEvent, useConfig, useCustomer, useUtils, useOrderingTheme } from 'ordering-components-external'
 import { useTheme } from 'styled-components'
 import AiOutlineClose from '@meronex/icons/ai/AiOutlineClose'
-import { LanguageSelector } from '../LanguageSelector'
+import { LanguageSelector } from '../../../../../components/LanguageSelector'
 
 import { GeoAlt } from 'react-bootstrap-icons'
 import TiWarningOutline from '@meronex/icons/ti/TiWarningOutline'
@@ -25,7 +25,8 @@ import {
   MomentMenu,
   FarAwayMessage,
   Divider,
-  AddressFormWrapper
+  AddressFormWrapper,
+  LanguageSelectorWrapper
 } from './styles'
 import { useWindowSize } from '../../../../../hooks/useWindowSize'
 import { useOnlineStatus } from '../../../../../hooks/useOnlineStatus'
@@ -350,9 +351,6 @@ export const Header = (props) => {
                           />
                         )
                       )}
-                      {isCustomerMode && (
-                        <LanguageSelector />
-                      )}
                       {windowSize.width > 768 && (
                         <UserPopover
                           withLogout
@@ -365,6 +363,9 @@ export const Header = (props) => {
                     </>
                   )
                 }
+                <LanguageSelectorWrapper>
+                  <LanguageSelector />
+                </LanguageSelectorWrapper>
               </Menu>
             </RightHeader>
           )}
@@ -423,7 +424,7 @@ export const Header = (props) => {
             title={(!auth && modalSelected === 'address') && t('WHAT_IS_YOUR_ADDRESS', 'What\'s your address?')}
             open={modalIsOpen}
             onClose={() => setModalIsOpen(false)}
-            width={modalSelected === 'address' ? orderState?.options?.user_id ? '70%' : '50%' : '700px'} 
+            width={modalSelected === 'address' ? orderState?.options?.user_id ? '70%' : '50%' : '700px'}
           >
             {modalSelected === 'cart' && (
               <CartContent

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

@@ -111,10 +111,8 @@ export const Menu = styled.div`
     }
 
     ${({ isCustomerMode }) => !isCustomerMode && css`
-      margin: 0px 10px;
+      margin: 0px 5px;
       height: 40px;
-      border-color: #CCC;
-      background-color: #CCC !important;
 
       svg {
         font-size: 16px;

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

@@ -78,50 +78,9 @@ const MomentControlUI = (props) => {
 
   const getTimes = (curdate, schedule) => {
     validateSelectedDate(curdate, schedule)
-    const date = new Date()
     const dateParts = curdate.split('-')
     const dateSeleted = new Date(dateParts[0], dateParts[1] - 1, dateParts[2])
-    var times = []
-    for (var k = 0; k < schedule[dateSeleted.getDay()].lapses.length; k++) {
-      var open = {
-        hour: schedule[dateSeleted.getDay()].lapses[k].open.hour,
-        minute: schedule[dateSeleted.getDay()].lapses[k].open.minute
-      }
-      var close = {
-        hour: schedule[dateSeleted.getDay()].lapses[k].close.hour,
-        minute: schedule[dateSeleted.getDay()].lapses[k].close.minute
-      }
-      for (var i = open.hour; i <= close.hour; i++) {
-        if (date.getDate() !== dateSeleted.getDate() || i >= date.getHours()) {
-          let hour = ''
-          let meridian = ''
-          if (!is12hours) hour = i < 10 ? '0' + i : i
-          else {
-            if (i === 0) {
-              hour = '12'
-              meridian = ' ' + t('AM', 'AM')
-            } else if (i > 0 && i < 12) {
-              hour = (i < 10 ? '0' + i : i)
-              meridian = ' ' + t('AM', 'AM')
-            } else if (i === 12) {
-              hour = '12'
-              meridian = ' ' + t('PM', 'PM')
-            } else {
-              hour = ((i - 12 < 10) ? '0' + (i - 12) : (i - 12))
-              meridian = ' ' + t('PM', 'PM')
-            }
-          }
-          for (let j = (i === open.hour ? open.minute : 0); j <= (i === close.hour ? close.minute : 59); j += 15) {
-            if (i !== date.getHours() || j >= date.getMinutes() || date.getDate() !== dateSeleted.getDate()) {
-              times.push({
-                text: hour + ':' + (j < 10 ? '0' + j : j) + meridian,
-                value: (i < 10 ? '0' + i : i) + ':' + (j < 10 ? '0' + j : j)
-              })
-            }
-          }
-        }
-      }
-    }
+    const times = getTimes(dateSeleted, schedule, is12hours)
     return times
   }
 

package/src/themes/five/src/components/OrderDetails/OrderBillSection.js

@@ -254,7 +254,7 @@ export const OrderBillSection = (props) => {
                   <span>
                     {event?.wallet_event
                       ? walletName[event?.wallet_event?.wallet?.type]?.name
-                      : event?.paymethod?.name}
+                      : t(event?.paymethod?.name.toUpperCase(), event?.paymethod?.name)}
                   </span>
                   {event?.data?.charge_id && (
                     <span>

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

@@ -23,7 +23,7 @@ import { Messages } from '../Messages'
 import { ReviewOrder } from '../ReviewOrder'
 import { ReviewProduct } from '../ReviewProduct'
 import { ReviewDriver } from '../ReviewDriver'
-import { ProductShare } from '../../../../../components/ProductShare'
+import { ProductShare } from '../ProductShare'
 import { OrderBillSection } from './OrderBillSection'
 import { ActionsSection } from './ActionsSection'
 import { OrderPreferencesSection } from './OrderPreferencesSections'
@@ -67,7 +67,9 @@ import {
   BusinessExternalWrapper,
   DirectionButtonWrapper,
   ProfessionalWrapper,
-  ProfessionalBlock
+  ProfessionalBlock,
+  PlaceSpotWrapper,
+  PoweredByOrdering
 } from './styles'
 import { useTheme } from 'styled-components'
 import { TaxInformation } from '../TaxInformation'
@@ -411,6 +413,10 @@ const OrderDetailsUI = (props) => {
                       <div className='wrap'>
                         <ProductShare
                           defaultUrl={urlToShare(order?.hash_key)}
+                          product={{
+                            images: order.business?.logo,
+                            name: order.business?.name
+                          }}
                         />
                       </div>
                     </ShareOrder>
@@ -535,18 +541,14 @@ const OrderDetailsUI = (props) => {
                 </BusinessWrapper>
 
                 {showDeliveryType && placeSpotTypes.includes(order?.delivery_type) && (
-                  <BusinessWrapper
-                    w='calc(100% - 20px)'
-                    borderTop
-                  >
+                  <PlaceSpotWrapper>
                     <PlaceSpot
                       isInputMode
                       cart={order}
-                      containerStyle={{ width: 'calc(100% - 20px)' }}
                       spotNumberDefault={order?.spot_number}
                       vehicleDefault={order?.vehicle}
                     />
-                  </BusinessWrapper>
+                  </PlaceSpotWrapper>
                 )}
 
                 {showOrderActions && (

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

@@ -789,4 +789,24 @@ export const ProfessionalWrapper = styled.div`
 export const ProfessionalBlock = styled.div`
   border-bottom: 1px solid ${props => props.theme.colors.disabled};
   margin-bottom: 15px;
-`
+`
+export const PlaceSpotWrapper = styled.div`
+  @media (min-width: 768px) {
+    width: calc(100% - 20px);
+  }
+`
+
+export const PoweredByOrdering = styled.p`
+  text-align: center;
+  margin: 0;
+  display: flex;
+  justify-content: center;
+  white-space: pre !important;
+  margin-bottom: 10px;
+  a{
+    font-weight: 600;
+  }
+  a:hover{
+    text-decoration: underline;
+  }
+`

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

@@ -100,7 +100,6 @@ const PaymentOptionsUI = (props) => {
   } = props
   const [, t] = useLanguage()
   const [{ token }] = useSession()
-  const [{ loading: loadingOptions }] = useOrder()
   const [alertState, setAlertState] = useState({ open: false, content: [] })
 
   const paymethodSelected = props.paySelected || props.paymethodSelected
@@ -173,31 +172,31 @@ const PaymentOptionsUI = (props) => {
         <BeforeComponent key={i} {...props} />))}
       <PaymentMethodsContainer>
         <PaymentMethodsList className='payments-list'>
-          {!(paymethodsList.loading || isLoading || loadingOptions) &&
-          supportedMethods.length > 0 && (
-            supportedMethods.sort((a, b) => a.id - b.id).map(paymethod => (
-              <React.Fragment key={paymethod.id}>
-                {
-                  (!isCustomerMode || (isCustomerMode && (paymethod.gateway === 'card_delivery' || paymethod.gateway === 'cash'))) && (
-                    <PayCard
-                      isDisabled={isDisabled}
-                      className={`card ${paymethodSelected?.id === paymethod.id ? 'active' : ''}`}
-                      onClick={() => handlePaymentMethodClick(paymethod)}
-                    >
-                      <div>
-                        {getPayIcon(paymethod.id)}
-                      </div>
-                      <p>
-                        {t(paymethod.gateway.toUpperCase(), paymethod.name)}
-                      </p>
-                    </PayCard>
-                  )
-                }
-              </React.Fragment>
-            ))
-          )}
+          {!(paymethodsList.loading || isLoading) &&
+            supportedMethods.length > 0 && (
+              supportedMethods.sort((a, b) => a.id - b.id).map(paymethod => (
+                <React.Fragment key={paymethod.id}>
+                  {
+                    (!isCustomerMode || (isCustomerMode && (paymethod.gateway === 'card_delivery' || paymethod.gateway === 'cash'))) && (
+                      <PayCard
+                        isDisabled={isDisabled}
+                        className={`card ${paymethodSelected?.id === paymethod.id ? 'active' : ''}`}
+                        onClick={() => handlePaymentMethodClick(paymethod)}
+                      >
+                        <div>
+                          {getPayIcon(paymethod.id)}
+                        </div>
+                        <p>
+                          {t(paymethod.gateway.toUpperCase(), paymethod.name)}
+                        </p>
+                      </PayCard>
+                    )
+                  }
+                </React.Fragment>
+              ))
+            )}
 
-          {(paymethodsList.loading || isLoading || loadingOptions) && (
+          {(paymethodsList.loading || isLoading) && (
             [...Array(5).keys()].map(i => (
               <PayCard key={i} isSkeleton>
                 <Skeleton key={i} width={100} height={60} style={{ marginLeft: '10px' }} />
@@ -211,7 +210,7 @@ const PaymentOptionsUI = (props) => {
             />
           )}
 
-          {!(paymethodsList.loading || isLoading || loadingOptions) &&
+          {!(paymethodsList.loading || isLoading) &&
             !paymethodsList.error &&
             (!paymethodsList?.paymethods || supportedMethods.length === 0) &&
             (

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

@@ -67,11 +67,21 @@ export const WrapperInput = styled.div`
 export const WrapperOption = styled.div`
   display: flex;
   flex-direction: column;
+  min-width: 240px;
+  flex: 1;
+  padding: 0 10px;
 `
 
 export const WrapperOptionList = styled.div`
-  display:grid;
-  grid-template-columns: 1fr 1fr;
-  grid-column-gap: 20px;
-  grid-row-gap: 20px;
+  display: flex;
+  flex-wrap: wrap;
+  width: calc(100% + 20px);
+  margin-left: -10px;
+
+  @media (min-width: 1600px) {
+    display:grid;
+    grid-template-columns: 1fr 1fr;
+    grid-column-gap: 20px;
+    grid-row-gap: 20px;
+  }
 `

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

@@ -4,7 +4,7 @@ import {
   Pencil,
   Trash
 } from 'react-bootstrap-icons'
-import { useUtils, useLanguage, useOrder, useOrderingTheme } from 'ordering-components-external'
+import { useUtils, useLanguage, useOrder, useConfig, useOrderingTheme } from 'ordering-components-external'
 import { useWindowSize } from '../../../../../hooks/useWindowSize'
 import {
   AccordionSection,
@@ -50,6 +50,7 @@ export const ProductItemAccordion = (props) => {
   const [orderState] = useOrder()
   const [{ parsePrice, parseDate }] = useUtils()
   const windowSize = useWindowSize()
+  const [{ configs }] = useConfig()
   const [orderingTheme] = useOrderingTheme()
   const [setActive, setActiveState] = useState('')
   const [setHeight, setHeightState] = useState('0px')
@@ -130,7 +131,11 @@ export const ProductItemAccordion = (props) => {
               <ScheduleInfoWrapper>
                 <h3>{product.name}</h3>
                 <ScheduleInfo>
-                  <span>{parseDate(product?.calendar_event?.start, { outputFormat: 'hh:mm a' })} - {parseDate(product?.calendar_event?.end, { outputFormat: 'hh:mm a' })}</span>
+                  <span>
+                    {parseDate(product?.calendar_event?.start, { outputFormat: (configs?.format_time?.value === '12') ? 'hh:mm a' : 'HH:mm' })}
+                    {' '}-{' '}
+                    {parseDate(product?.calendar_event?.end, { outputFormat: (configs?.format_time?.value === '12') ? 'hh:mm a' : 'HH:mm' })}
+                  </span>
                 </ScheduleInfo>
               </ScheduleInfoWrapper>
             ) : (
@@ -192,7 +197,6 @@ export const ProductItemAccordion = (props) => {
                 </ContentInfo>
               </>
             )}
-
           </ProductInfo>
 
           {(product?.valid || !isCartProduct) && windowSize.width > 410 && (

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

@@ -22,7 +22,7 @@ const ProductOptionUI = (props) => {
   if (option.min === 1 && option.max === 1) {
     maxMin = t('REQUIRED', 'Required')
   } else if (option.min === 0 && option.max > 0) {
-    maxMin = `${t('MAX', 'Max')}. ${option.max}`
+    maxMin = `${!option?.limit_suboptions_by_max ? t('MAX_PER_SUBOPTION', 'MAX PER SUBOPTION') : t('MAX', 'Max')}. ${option.max}`
   } else if (option.min > 0 && option.max === 0) {
     maxMin = `${t('MIN', 'Min')}. ${option.min})`
   }

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

@@ -39,7 +39,7 @@ const ProductOptionSubOptionUI = (props) => {
     setIsScrollAvailable
   } = props
 
-  const disableIncrement = option?.limit_suboptions_by_max ? (balance === option?.max || state.quantity === suboption.max) : state.quantity === suboption?.max || (!state.selected && balance === option?.max)
+  const disableIncrement = option?.limit_suboptions_by_max ? (balance === option?.max || state.quantity === suboption.max) : state.quantity === option?.max
   const price = option?.with_half_option && suboption?.half_price && state.position !== 'whole' ? suboption?.half_price : suboption?.price
   const [, t] = useLanguage()
   const [{ parsePrice }] = useUtils()

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

@@ -48,7 +48,7 @@ export const ProfessionalProfile = (props) => {
             business={currentProfessional}
             isProfessional
             isDisabled
-            maxDays={50}
+            maxDays={40}
             useOrderContext={false}
           />
         ) : (