ordering-ui-external 14.1.49 → 14.1.52

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

@@ -17,11 +17,13 @@ import PhoneInput from 'react-phone-number-input'
 import { parsePhoneNumber } from 'libphonenumber-js'
 import {
   UserFormDetails as UserFormController,
+  useConfig,
   useLanguage,
   useSession
 } from 'ordering-components-external'
 
 import { UserFormDetailsUI } from '../UserFormDetails'
+import { Modal } from '../Modal'
 
 const UserDetailsUI = (props) => {
   const {
@@ -37,16 +39,30 @@ const UserDetailsUI = (props) => {
     isModal,
     setIsOpenUserData,
     isAddressFormOpen,
-    onClose
+    onClose,
+    userConfirmPhone,
+    setUserConfirmPhone
   } = props
 
   const [, t] = useLanguage()
   const [{ user }] = useSession()
+  const [{ configs }] = useConfig()
+
   const userData = userState.result?.result || props.userData || formState.result?.result || user
 
   const validationFieldsLength = Object.values(validationFields?.fields?.checkout)?.map(field => field.enabled)
   const countryPhoneCode = userData?.country_phone_code ?? userData?.country_code
-
+  const inputsConfirmAddress = [{
+    id: 1,
+    name: 'Name',
+    type: 'text',
+    code: 'name'
+  }, {
+    id: 2,
+    name: 'Lastname',
+    type: 'text',
+    code: 'lastname'
+  }]
   useEffect(() => {
     if (isUserDetailsEdit) {
       !isEdit && toggleIsEdit()
@@ -71,14 +87,17 @@ const UserDetailsUI = (props) => {
       {props.beforeComponents?.map((BeforeComponent, i) => (
         <BeforeComponent key={i} {...props} />))}
       {(validationFields.loading || formState.loading || userState.loading) && (
-        <UserData>
-          {[...Array(isCustomerMode ? 1 : validationFieldsLength?.length)]?.map(field => (
-            <React.Fragment key={field?.id}>
-              <Skeleton width={250} height={isCustomerMode ? 10 : 50} />
-              <Skeleton width={180} height={isCustomerMode ? 10 : 25} />
-              <Skeleton width={210} height={isCustomerMode ? 10 : 50} />
-            </React.Fragment>
-          ))}
+        <UserData isModal={isModal}>
+          {isModal ? [...Array(4)].map((_, i) => (
+            <Skeleton key={i} width={150 + (i * 10)} height={15} />
+          ))
+            : validationFieldsLength?.map((field, i) => (
+              <React.Fragment key={field?.id}>
+                <Skeleton width={250} height={50} />
+                <Skeleton width={180} height={25} />
+                <Skeleton width={210} height={50} />
+              </React.Fragment>
+            ))}
         </UserData>
       )}
 
@@ -123,7 +142,7 @@ const UserDetailsUI = (props) => {
                   <CountryFlag>
                     {
                       countryPhoneCode && userData?.cellphone && (
-                        <PhoneInput onChange={() => { }} defaultCountry={parsePhoneNumber(`+${(countryPhoneCode?.replace('+', ''))} ${userData?.cellphone?.replace(`+${countryPhoneCode}`, '')}`)?.country} />
+                        <PhoneInput onChange={() => { }} defaultCountry={parsePhoneNumber(`+${(countryPhoneCode?.replace('+', ''))} ${userData?.cellphone?.replace(`+${countryPhoneCode}`, '')}`)?.country || configs?.default_country_code?.value} />
                       )
                     }
                   </CountryFlag>
@@ -144,6 +163,21 @@ const UserDetailsUI = (props) => {
           )}
         </Container>
       )}
+      <Modal
+        title={t('CONFIRM_CELLPHONE_CLIENT', 'Confirm client\'s cellphone')}
+        open={userConfirmPhone?.open}
+        onClose={() => setUserConfirmPhone({ open: false, result: null })}
+      >
+        <UserFormDetailsUI
+          {...props}
+          confirmDataLayout
+          isEdit
+          dontToggleEditMode
+          inputsconfirmData={inputsConfirmAddress}
+          userData={userData}
+          isCustomerMode={isCustomerMode}
+        />
+      </Modal>
       {props.afterComponents?.map((AfterComponent, i) => (
         <AfterComponent key={i} {...props} />))}
       {props.afterElements?.map((AfterElement, i) => (

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

@@ -70,6 +70,9 @@ export const UserData = styled.div`
     font-size: 14px;
     color: ${props => props.theme?.colors.darkTextColor};
   }
+  ${({ isModal }) => isModal && css`
+    margin-top: 40px;
+  `}
 `
 
 export const UserName = styled.p`
@@ -120,7 +123,6 @@ export const PhoneContainer = styled.div`
   display: flex;
   align-items: center;
   height: 30px;
-
   p {
     margin: 0;
   }

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

@@ -38,7 +38,8 @@ export const UserFormDetailsUI = (props) => {
     confirmDataLayout,
     inputsconfirmData,
     handleRequestCustomerAddress,
-    setCellphoneStartZero
+    setCellphoneStartZero,
+    dontToggleEditMode
   } = props
 
   const formMethods = useForm()
@@ -114,6 +115,9 @@ export const UserFormDetailsUI = (props) => {
       })
       return
     }
+    if (Object.keys(formState.changes).length === 0 && isPhoneNumberValid && confirmDataLayout) {
+      handleRequestCustomerAddress()
+    }
     if (Object.keys(formState.changes).length > 0 && isPhoneNumberValid) {
       let changes = null
       if (user?.cellphone && !userPhoneNumber) {
@@ -125,7 +129,10 @@ export const UserFormDetailsUI = (props) => {
       if (isCustomerMode) {
         setUserCustomer(formState.result.result, true)
       }
-      handleButtonUpdateClick(changes)
+      handleButtonUpdateClick({
+        ...changes,
+        confirmDataLayout
+      }, null, null, { dontToggleEditMode })
     }
   }
 
@@ -206,7 +213,7 @@ export const UserFormDetailsUI = (props) => {
         setUserCellPhone(true)
       }
     }
-    if (!isEdit) onCancel()
+    if (!isEdit) onCancel && onCancel()
   }, [user, isEdit])
 
   useEffect(() => {
@@ -237,7 +244,12 @@ export const UserFormDetailsUI = (props) => {
         </React.Fragment>))}
       {props.beforeComponents?.map((BeforeComponent, i) => (
         <BeforeComponent key={i} {...props} />))}
-      <FormInput onSubmit={formMethods.handleSubmit(onSubmit)} isCheckout={isCheckout} isEdit={isEdit}>
+      <FormInput
+        onSubmit={formMethods.handleSubmit(onSubmit)}
+        isCheckout={isCheckout}
+        isEdit={isEdit}
+        confirmDataLayout={confirmDataLayout}
+      >
         {!validationFields?.loading ? (
           <>
             {
@@ -250,13 +262,17 @@ export const UserFormDetailsUI = (props) => {
               props.beforeMidComponents?.map((BeforeMidComponents, i) => (
                 <BeforeMidComponents key={i} {...props} />))
             }
-            <Divider />
-            {sortInputFields({ values: validationFields?.fields?.checkout }).map(field =>
+            {!confirmDataLayout && (
+              <Divider />
+            )}
+            {sortInputFields({ values: inputsconfirmData || validationFields?.fields?.checkout }).map(field =>
               showField && showField(field.code) && (
                 <React.Fragment key={field.id}>
                   {field.code === 'email' ? (
                     <InputGroup>
-                      <p>{t(field.code.toUpperCase(), field?.name)}</p>
+                      {!confirmDataLayout && (
+                        <p>{t(field.code.toUpperCase(), field?.name)}</p>
+                      )}
                       <Input
                         key={field.id}
                         type={field.type}
@@ -278,8 +294,10 @@ export const UserFormDetailsUI = (props) => {
                       />
                     </InputGroup>
                   ) : (
-                    <InputGroup>
-                      <p>{t(field.code.toUpperCase(), field?.name)}</p>
+                    <InputGroup confirmDataLayout={confirmDataLayout}>
+                      {!confirmDataLayout && (
+                        <p>{t(field.code.toUpperCase(), field?.name)}</p>
+                      )}
                       <Input
                         key={field.id}
                         type={field.type}
@@ -308,8 +326,10 @@ export const UserFormDetailsUI = (props) => {
               )
             )}
             {!!showInputPhoneNumber && (
-              <InputPhoneNumberWrapper>
-                <p>{t('PHONE', 'Phone')}</p>
+              <InputPhoneNumberWrapper confirmDataLayout={confirmDataLayout}>
+                {!confirmDataLayout && (
+                  <p>{t('PHONE', 'Phone')}</p>
+                )}
                 <InputPhoneNumber
                   user={user}
                   value={userPhoneNumber}
@@ -319,7 +339,9 @@ export const UserFormDetailsUI = (props) => {
                 />
               </InputPhoneNumberWrapper>
             )}
-            <Divider />
+            {!confirmDataLayout && (
+              <Divider />
+            )}
             {
               props.afterMidElements?.map((MidElement, i) => (
                 <React.Fragment key={i}>
@@ -331,14 +353,18 @@ export const UserFormDetailsUI = (props) => {
                 <MidComponent key={i} {...props} />))
             }
             <ActionsForm>
-              {((formState && Object.keys(formState?.changes).length > 0 && isEdit) || formState?.loading) && (
+              {((formState && Object.keys(formState?.changes).length > 0 && isEdit) || formState?.loading || confirmDataLayout) && (
                 <Button
                   id='form-btn'
                   color='primary'
                   type='submit'
                   disabled={formState.loading}
                 >
-                  {formState.loading ? t('UPDATING', 'Updating...') : t('UPDATE', 'Update')}
+                  {confirmDataLayout
+                    ? t('SEND_SMS', 'Send sms')
+                    : formState.loading
+                      ? t('UPDATING', 'Updating...')
+                      : t('UPDATE', 'Update')}
                 </Button>
               )}
             </ActionsForm>

package/src/themes/callcenterOriginal/src/components/UserFormDetails/styles.js

@@ -96,7 +96,16 @@ export const SkeletonForm = styled.div`
 
 export const InputGroup = styled.div`
   width: 100%;
-
+  ${({ confirmDataLayout }) => confirmDataLayout && css`
+    padding: 0 20px;
+    width: 50%;
+    box-sizing: border-box;
+    input {
+      border: 1px solid #DEE2E6;
+      border-radius: 7.6px;
+      padding: 10px 15px !important;
+    }
+  `}
   p {
     font-weight: 500;
     font-size: 20px;
@@ -115,6 +124,7 @@ export const Divider = styled.div`
 `
 
 export const InputPhoneNumberWrapper = styled(InputGroup)`
+  width: 100%;
   .PhoneInput {
     border-bottom: 1px solid #E9ECEF;
     input {
@@ -122,6 +132,14 @@ export const InputPhoneNumberWrapper = styled(InputGroup)`
       border-radius: 0px;
       padding: 5px;
     }
+    ${({ confirmDataLayout }) => confirmDataLayout && css`
+      border-bottom: 0px;
+      input {
+        border: 1px solid #DEE2E6;
+        border-radius: 7.6px;
+        padding: 10px 15px !important;
+      }
+    `}
   }
 `
 

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

@@ -188,7 +188,7 @@ export const BusinessBasicInformation = (props) => {
         <SearchProducts
           {...props}
           onClose={() => {
-            handleChangeSearch('')
+            handleChangeSearch && handleChangeSearch('')
             setOpenSearchProducts(false)
             window.scroll({
               top: window.scrollY - 1,

package/src/themes/five/src/components/BusinessController/franchises/OloBusinessController/index.js

@@ -0,0 +1,237 @@
+import React, { useState, useRef } from 'react'
+import { BusinessController as BusinessSingleCard, useLanguage, useSession, useUtils } from 'ordering-components-external'
+import Skeleton from 'react-loading-skeleton'
+import { useTheme } from 'styled-components'
+import { Alert } from '../../../Confirm'
+import { convertHoursToMinutes } from '../../../../../../../utils'
+import {
+  ContainerCard,
+  WrapperBusinessCard,
+  WrapperBusinessLogo,
+  BusinessContent,
+  BusinessLogo,
+  BusinessInfo,
+  BusinessInfoItem,
+  BusinessName,
+  Categories,
+  Medadata,
+  NameWrapper,
+  BusinessInfomation,
+  Address,
+  SelectStoreContainer,
+  FavoriteWrapper
+} from './styles'
+import BisStar from '@meronex/icons/bi/BisStar'
+import GoPrimitiveDot from '@meronex/icons/go/GoPrimitiveDot'
+import { Heart as DisLike, HeartFill as Like } from 'react-bootstrap-icons'
+import dayjs from 'dayjs'
+import { Button } from '../../../../styles/Buttons'
+
+const BusinessControllerUI = (props) => {
+  const {
+    isSkeleton,
+    business,
+    orderState,
+    handleClick,
+    isCustomLayout,
+    isShowCallcenterInformation,
+    handleFavoriteBusiness,
+    businessDeliveryPrice,
+    businessDeliveryTime,
+    businessDistance,
+    businessPickupTime
+  } = props
+  const theme = useTheme()
+  const [, t] = useLanguage()
+  const [{ parsePrice, parseDistance, optimizeImage }] = useUtils()
+  const [{ auth }] = useSession()
+  const favoriteRef = useRef(null)
+  const [alertState, setAlertState] = useState({ open: false, content: [] })
+
+  const layout = theme?.business_listing_view?.components?.layout?.type || 'starbucks'
+  const hideCategories = theme?.business_listing_view?.components?.business?.components?.categories?.hidden
+  const hideAddress = theme?.business_listing_view?.components?.business?.components?.address?.hidden ?? true
+  const hideBusinessFavorite = theme?.business_listing_view?.components?.business?.components?.favorite?.hidden
+
+  const handleShowAlert = () => {
+    setAlertState({ open: true, content: [t('ERROR_ADD_PRODUCT_BUSINESS_CLOSED', 'The Business is closed at the moment')] })
+  }
+
+  const handleChangeFavorite = () => {
+    if (auth) {
+      handleFavoriteBusiness && handleFavoriteBusiness(!business?.favorite)
+    }
+  }
+
+  const scheduleFormatted = ({ hour, minute }) => {
+    const checkTime = (val) => val < 10 ? `0${val}` : val
+    return `${checkTime(hour)}:${checkTime(minute)}`
+  }
+
+  const getScheduleOpen = (business) => {
+    const currentDate = dayjs().tz(business?.timezone)
+    let lapse = null
+    if (business?.today?.enabled) {
+      lapse = business?.today?.lapses?.find(lapse => {
+        const from = currentDate.hour(lapse.open.hour).minute(lapse.open.minute)
+        const to = currentDate.hour(lapse.close.hour).minute(lapse.close.minute)
+        return currentDate.unix() >= from.unix() && currentDate.unix() <= to.unix()
+      })
+    }
+    return lapse ? `${scheduleFormatted(lapse.open)} - ${scheduleFormatted(lapse.close)}` : ''
+  }
+
+  const handleClickBusiness = (e, business) => {
+    if (favoriteRef?.current?.contains(e.target)) return
+    handleClick(business)
+  }
+
+  return (
+    <>
+
+      <ContainerCard isSkeleton={isSkeleton}>
+        <WrapperBusinessCard isSkeleton={isSkeleton}>
+          <BusinessContent>
+            <WrapperBusinessLogo isSkeleton={isSkeleton}>
+              {!isSkeleton && (business?.logo || theme.images?.dummies?.businessLogo) ? (
+                <BusinessLogo bgimage={optimizeImage(business?.logo || theme.images?.dummies?.businessLogo, 'h_200,c_limit')} />
+              ) : (
+                <Skeleton height={70} width={70} />
+              )}
+            </WrapperBusinessLogo>
+            <BusinessInfo className='info'>
+              <BusinessInfoItem>
+                <NameWrapper>
+                  {business?.name ? (
+                    <BusinessName>{business?.name}</BusinessName>
+                  ) : (
+                    <Skeleton width={100} />
+                  )}
+                  <BusinessInfomation>
+                    {business?.reviews?.total > 0 ? (
+                      <div className='reviews'>
+                        <BisStar />
+                        <span>{business?.reviews?.total}</span>
+                      </div>
+                    ) : (
+                      business?.reviews?.total !== 0 && <Skeleton width={50} />
+                    )}
+                    {!hideBusinessFavorite && (
+                      <FavoriteWrapper ref={favoriteRef} onClick={handleChangeFavorite}>
+                        {!isSkeleton ? (
+                          <>
+                            {(business?.favorite) ? <Like /> : <DisLike />}
+                          </>
+                        ) : (
+                          <Skeleton width={16} height={16} />
+                        )}
+                      </FavoriteWrapper>
+                    )}
+
+                  </BusinessInfomation>
+                </NameWrapper>
+                {!isShowCallcenterInformation && !hideCategories && (
+                  <Categories>
+                    {
+                      Object.keys(business).length > 0 ? (
+                        <>
+                          {business?.address}
+                        </>
+                      ) : (
+                        <Skeleton width={100} />
+                      )
+                    }
+                  </Categories>
+                )}
+                {!isShowCallcenterInformation && !hideAddress && (
+                  <Address>
+                    {
+                      Object.keys(business).length > 0 ? (
+                        business?.address
+                      ) : (
+                        <Skeleton width={100} />
+                      )
+                    }
+                  </Address>
+                )}
+                {layout !== 'mapview' && (
+                  <Medadata isCustomerMode={isShowCallcenterInformation}>
+                    {(businessDeliveryPrice || business?.delivery_price) >= 0 ? (
+                      <p>
+                        <span>{t('DELIVERY_FEE', 'Delivery fee')}</span>
+                        {business && parsePrice((businessDeliveryPrice ?? business?.delivery_price))}
+                      </p>
+                    ) : (
+                      <Skeleton width={65} />
+                    )}
+                    <>
+                      {Object.keys(business).length > 0 ? (
+                        <p className='bullet'>
+                          <GoPrimitiveDot />
+                          {convertHoursToMinutes(orderState?.options?.type === 1 ? (businessDeliveryTime ?? business?.delivery_time) : (businessPickupTime ?? business?.pickup_time)) || <Skeleton width={100} />}
+                        </p>
+                      ) : (
+                        <Skeleton width={65} />
+                      )}
+                    </>
+                    <>
+                      {(businessDistance ?? business?.distance) >= 0 ? (
+                        <p className='bullet'>
+                          <GoPrimitiveDot />
+                          {parseDistance((businessDistance ?? business?.distance))}
+                        </p>
+                      ) : (
+                        <Skeleton width={65} />
+                      )}
+                    </>
+                  </Medadata>
+                )}
+                <Medadata final>
+                  {!isSkeleton > 0 ? (
+                    <>
+                      <div className='schedule'>
+                        {`${t('SCHEDULE', 'Schedule')}: ${getScheduleOpen(business)}`}
+                      </div>
+                      <SelectStoreContainer>
+                        <Button
+                          outline
+                          onClick={(e) => !isSkeleton && handleClick && (!business?.open && isCustomLayout ? handleShowAlert() : handleClickBusiness(e, business))}
+                        >
+                          {t('START_ORDER', 'Start order')}
+                        </Button>
+                      </SelectStoreContainer>
+                    </>
+                  ) : (
+                    <>
+                      <Skeleton width={70} />
+                      <Skeleton width={120} height={20} />
+                    </>
+                  )}
+                </Medadata>
+              </BusinessInfoItem>
+            </BusinessInfo>
+          </BusinessContent>
+        </WrapperBusinessCard>
+      </ContainerCard>
+      <Alert
+        title={t('BUSINESS_CLOSED', 'Business Closed')}
+        content={alertState.content}
+        acceptText={t('ACCEPT', 'Accept')}
+        open={alertState.open}
+        onClose={() => setAlertState({ open: false, content: [] })}
+        onAccept={() => setAlertState({ open: false, content: [] })}
+        closeOnBackdrop={false}
+      />
+    </>
+  )
+}
+
+export const BusinessController = (props) => {
+  const businessControllerProps = {
+    ...props,
+    UIComponent: BusinessControllerUI
+  }
+  return (
+    <BusinessSingleCard {...businessControllerProps} />
+  )
+}