ordering-ui-external 2.5.9 → 2.6.1

package/src/themes/five/src/components/GiftCard/RedeemGiftCard/index.js

@@ -1,6 +1,6 @@
-import React, { useEffect, useState } from 'react'
+import React, { useEffect, useState, useRef } from 'react'
 import { useLanguage, useUtils, RedeemGiftCard as RedeemGiftCardController } from 'ordering-components-external'
-import { useForm } from 'react-hook-form'
+import { useForm, Controller } from 'react-hook-form'
 import { Alert } from '../../Confirm'
 import { Button } from '../../../styles/Buttons'
 import { Input } from '../../../styles/Inputs'
@@ -22,13 +22,23 @@ const RedeemGiftCardUI = (props) => {
 
   const [, t] = useLanguage()
   const [{ parsePrice }] = useUtils()
-  const { register, handleSubmit, errors } = useForm()
+  const { control, register, handleSubmit, errors } = useForm()
   const [alertState, setAlertState] = useState({ open: false, content: [] })
+  const codeRef = useRef(null)
 
   const onSubmit = (values) => {
     handleApply(values)
   }
 
+  const handleChangeCode = (event) => {
+    let string = event.target.value
+    string = string.replace(/-/g, '')
+    if (!string) return
+    const codeSlices = string.match(/.{1,4}/g)
+    string = codeSlices.join('-')
+    codeRef.current.value = string
+  }
+
   useEffect(() => {
     if (Object.keys(errors).length > 0) {
       setAlertState({
@@ -53,14 +63,24 @@ const RedeemGiftCardUI = (props) => {
           <h2>{t('REDEEM_GIFT_CARD', 'Redeem a gift card')}</h2>
           <FormController>
             <label>{t('GIFT_CARD_CODE', 'Gift card code')}</label>
-            <Input
+            <Controller
               name='code'
-              placeholder='0000 0000'
-              type='text'
-              ref={register({
+              control={control}
+              render={({ onChange, value }) => (
+                <Input
+                  placeholder='XXXX-XXXX-XXXX-XXXX'
+                  type='text'
+                  autoComplete='off'
+                  ref={codeRef}
+                  onChange={e => {
+                    onChange(e.target.value)
+                    handleChangeCode(e)
+                  }}
+                />
+              )}
+              rules={{
                 required: t('VALIDATION_ERROR_REQUIRED', 'Code is required').replace('_attribute_', t('CODE', 'Code'))
-              })}
-              autoComplete='off'
+              }}
             />
           </FormController>
           <FormController>

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

@@ -136,10 +136,12 @@ const MultiCartsPaymethodsAndWalletsUI = (props) => {
           publicKey={paymethodSelected?.paymethod?.credentials?.publishable}
           payType={paymethodSelected?.paymethod?.name}
           onSelectCard={handlePaymethodDataChange}
+          paymethodSelected={paymethodSelected?.data?.id}
+          setCardList={setCardList}
         />
       )}
 
-      {stripeOptions.includes(paymethodSelected?.paymethod?.gateway) && paymethodSelected?.paymethod_data?.card && (
+      {stripeOptions.includes(paymethodSelected?.paymethod?.gateway) && paymethodSelected?.paymethod_data?.card && paymethodSelected?.gateway !== 'stripe' && (
         <PayCardSelected>
           <CardItemContent>
             <span className='checks'>

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

@@ -29,6 +29,7 @@ export const OrderContextUI = (props) => {
   const userCustomer = JSON.parse(window.localStorage.getItem('user-customer'))
 
   const configTypes = configState?.configs?.order_types_allowed?.value.split('|').map(value => Number(value)) || []
+  const isPreOrderSetting = configState?.configs?.preorder_status_enabled?.value === '1'
 
   const handleTogglePopover = (type) => {
     setOpenPopover({
@@ -67,7 +68,7 @@ export const OrderContextUI = (props) => {
 
   return (
     <>
-      <Container isBusinessList={isBusinessList} hero={props.hideHero} >
+      <Container isBusinessList={isBusinessList} hero={props.hideHero} isCheckOut={isCheckOut}>
         <AddressMenu
           onClick={() => handleClickAddress()}
           isCheckOut={isCheckOut}
@@ -79,14 +80,16 @@ export const OrderContextUI = (props) => {
           <ItemInline>
             <OrderTypeSelectorHeader configTypes={configTypes} />
           </ItemInline>
-          <ItemInline>
-            <MomentPopover
-              open={openPopover.moment}
-              onClick={() => handleTogglePopover('moment')}
-              onClose={() => handleClosePopover('moment')}
-              isBanner
-            />
-          </ItemInline>
+          {isPreOrderSetting && (
+            <ItemInline>
+              <MomentPopover
+                open={openPopover.moment}
+                onClick={() => handleTogglePopover('moment')}
+                onClose={() => handleClosePopover('moment')}
+                isBanner
+              />
+            </ItemInline>
+          )}
         </FeatureItems>
       </Container>
       <Modal

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

@@ -6,7 +6,7 @@ export const Container = styled.div`
     padding: 0 15px;
     box-sizing: border-box;
   `}
-  ${({ hero }) => hero && css`
+  ${({ hero, isCheckOut }) => !(hero || isCheckOut) && css`
     position: absolute;
     top: 10%;
   `}

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

@@ -47,7 +47,7 @@ const OrderProgressUI = (props) => {
 
   useEffect(() => {
     if (orderList?.orders.length > 0) {
-      const sortedOrders = orderList.orders.sort((a, b) => a.id > b.id ? -1 : 1)
+      const sortedOrders = orderList.orders.filter(order => !!order?.business).sort((a, b) => a.id > b.id ? -1 : 1)
       const orderInProgress = sortedOrders.find(({ status }) => (statusToShow.includes(status)))
 
       let _lastOrder = null
@@ -109,7 +109,7 @@ const OrderProgressUI = (props) => {
                   <span>{lastOrder?.delivery_type === 1 ? t('ESTIMATED_DELIVERY', 'Estimated delivery') : t('ESTIMATED_TIME', 'Estimated time')}:&nbsp;</span>
                   <span>
                     {lastOrder?.delivery_datetime_utc
-                      ? parseTime(lastOrder?.delivery_datetime_utc, { outputFormat: 'hh:mm A', utc: false })
+                      ? parseTime(lastOrder?.delivery_datetime_utc, { outputFormat: configs?.general_hour_format?.value || 'HH:mm' })
                       : parseTime(lastOrder?.delivery_datetime, { utc: false })}
                     &nbsp;-&nbsp;
                     {statusToShow.includes(lastOrder?.status) ? (

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

@@ -475,7 +475,10 @@ export const SidebarMenu = (props) => {
           {!auth && (
             <>
               <MenuLink
-                onClick={() => handleOpenLoginSignUp('login')}
+                onClick={() => {
+                  handleOpenLoginSignUp('login')
+                  actionSidebar(false)
+                }}
               >
                 <WrappContent>
                   <MenuLinkIcon
@@ -499,7 +502,10 @@ export const SidebarMenu = (props) => {
               </MenuLink>
               {!isHideSignup && (
                 <MenuLink
-                  onClick={() => handleOpenLoginSignUp('signup')}
+                  onClick={() => {
+                    handleOpenLoginSignUp('signup')
+                    actionSidebar(false)
+                  }}
                 >
                   <WrappContent>
                     <MenuLinkIcon