ordering-ui-external 1.0.1 → 1.1.0

package/src/components/OrderDetails/index.js

@@ -5,7 +5,8 @@ import {
   useEvent,
   useUtils,
   useConfig,
-  GoogleMapsMap
+  GoogleMapsMap,
+  useOrderingTheme
 } from 'ordering-components-external'
 import FiPhone from '@meronex/icons/fi/FiPhone'
 import FaUserCircle from '@meronex/icons/fa/FaUserCircle'
@@ -89,7 +90,7 @@ const OrderDetailsUI = (props) => {
   const theme = useTheme()
   const [events] = useEvent()
   const [{ parsePrice, parseNumber, parseDate }] = useUtils()
-
+  const [orderingTheme] = useOrderingTheme()
   const [openMessages, setOpenMessages] = useState({ business: false, driver: false })
   const [isReviewOpen, setIsReviewOpen] = useState(false)
   const [isOrderReviewed, setIsOrderReviewed] = useState(false)
@@ -105,6 +106,20 @@ const OrderDetailsUI = (props) => {
 
   const isFromCheckPage = JSON.parse(window.localStorage.getItem('business-address'))
 
+  const showDeliveryDate = !orderingTheme?.theme?.confirmation?.components?.order?.components?.date?.hidden
+  const showDeliveryProgress = !orderingTheme?.theme?.confirmation?.components?.order?.components?.progress?.hidden
+  const showBusinessMessages = !orderingTheme?.theme?.confirmation?.components?.business?.components?.messages?.hidden
+  const showBusinessAddress = !orderingTheme?.theme?.confirmation?.components?.business?.components?.address?.hidden
+  const showBusinessMap = !orderingTheme?.theme?.confirmation?.components?.business?.components?.map?.hidden
+  const showBusinessLogo = !orderingTheme?.theme?.confirmation?.components?.business?.components?.logo?.hidden
+  const showDriverName = !orderingTheme?.theme?.confirmation?.components?.driver?.components?.name?.hidden
+  const showDriverPhone = !orderingTheme?.theme?.confirmation?.components?.driver?.components?.phone?.hidden
+  const showDriverMessages = !orderingTheme?.theme?.confirmation?.components?.driver?.components?.messages?.hidden
+  const showDriverEmail = !orderingTheme?.theme?.confirmation?.components?.driver?.components?.email?.hidden
+  const showDriverPhoto = !orderingTheme?.theme?.confirmation?.components?.driver?.components?.photo?.hidden
+  const showCustomerAddress = !orderingTheme?.theme?.confirmation?.components?.customer?.components?.address?.hidden
+  const showCustomerPhoto = !orderingTheme?.theme?.confirmation?.components?.customer?.components?.photo?.hidden
+
   const getOrderStatus = (s) => {
     const status = parseInt(s)
     const orderStatus = [
@@ -274,32 +289,42 @@ const OrderDetailsUI = (props) => {
               </Header>
               <OrderBusiness>
                 <BusinessWrapper>
-                  <LogoWrapper>
-                    <BusinessLogo bgimage={order?.business?.logo || theme.images?.dummies?.businessLogo} />
-                  </LogoWrapper>
+                  {showBusinessLogo && (
+                    <LogoWrapper>
+                      <BusinessLogo bgimage={order?.business?.logo || theme.images?.dummies?.businessLogo} />
+                    </LogoWrapper>
+                  )}
                   <BusinessInfo>
                     <h1>{order?.business?.name}</h1>
-                    <p>{order?.business?.address}</p>
-                    <p>{order?.business?.cellphone}</p>
-                    <p>{order?.business?.email}</p>
+                    {showBusinessAddress && (
+                      <p>{order?.business?.address}</p>
+                    )}
+                    {showDriverPhone && (
+                      <p>{order?.business?.cellphone}</p>
+                    )}
+                    {showDriverEmail && (
+                      <p>{order?.business?.email}</p>
+                    )}
                   </BusinessInfo>
                 </BusinessWrapper>
                 <ActionsBlock>
-                  {order?.driver && order?.driver.phone &&
+                  {order?.driver && order?.driver.phone && showDriverPhone &&
                     <span onClick={() => window.open(`tel:${order?.driver.phone}`)}>
                       <FiPhone />
                     </span>}
                   <span>
                     <BiStoreAlt onClick={() => handleBusinessRedirect(businessData?.slug)} />
                   </span>
-                  <MessagesIcon onClick={() => handleOpenMessages({ driver: false, business: true })}>
-                    {order?.unread_count > 0 && unreadAlert.business && (
-                      <ExclamationWrapper>
-                        <AiFillExclamationCircle />
-                      </ExclamationWrapper>
-                    )}
-                    <HiOutlineChat />
-                  </MessagesIcon>
+                  {showBusinessMessages && (
+                    <MessagesIcon onClick={() => handleOpenMessages({ driver: false, business: true })}>
+                      {order?.unread_count > 0 && unreadAlert.business && (
+                        <ExclamationWrapper>
+                          <AiFillExclamationCircle />
+                        </ExclamationWrapper>
+                      )}
+                      <HiOutlineChat />
+                    </MessagesIcon>
+                  )}
                 </ActionsBlock>
               </OrderBusiness>
 
@@ -309,38 +334,50 @@ const OrderDetailsUI = (props) => {
                   {order?.status !== 0 && order?.integration_id && (
                     <h1>{t('TICKET', 'Ticket')}: {order?.integration_id}</h1>
                   )}
-                  <p>{t('DATE_TIME_FOR_ORDER', theme?.defaultLanguages?.DATE_TIME_FOR_ORDER || 'Date and time for your order')}</p>
-                  <p className='date'>
-                    {
-                      order?.delivery_datetime_utc
-                        ? parseDate(order?.delivery_datetime_utc)
-                        : parseDate(order?.delivery_datetime, { utc: false })
-                    }
-                  </p>
-                  <StatusBar percentage={getOrderStatus(order?.status)?.percentage} />
+                  {showDeliveryDate && (
+                    <>
+                      <p>{t('DATE_TIME_FOR_ORDER', theme?.defaultLanguages?.DATE_TIME_FOR_ORDER || 'Date and time for your order')}</p>
+                      <p className='date'>
+                        {
+                          order?.delivery_datetime_utc
+                            ? parseDate(order?.delivery_datetime_utc)
+                            : parseDate(order?.delivery_datetime, { utc: false })
+                        }
+                      </p>
+                    </>
+                  )}
+                  {showDeliveryProgress && (
+                    <StatusBar percentage={getOrderStatus(order?.status)?.percentage} />
+                  )}
                 </OrderData>
-                <OrderStatus>
-                  <span>{getOrderStatus(order?.status)?.value}</span>
-                  <StatusImage>
-                    <img src={getImage(order?.status || 0)} alt='status' width='70px' height='70px' loading='lazy' />
-                  </StatusImage>
-                </OrderStatus>
+                {showDeliveryProgress && (
+                  <OrderStatus>
+                    <span>{getOrderStatus(order?.status)?.value}</span>
+                    <StatusImage>
+                      <img src={getImage(order?.status || 0)} alt='status' width='70px' height='70px' loading='lazy' />
+                    </StatusImage>
+                  </OrderStatus>
+                )}
               </OrderInfo>
 
               <SectionTitle>
                 {t('CUSTOMER', theme?.defaultLanguages?.CUSTOMER || 'Customer')}
               </SectionTitle>
               <OrderCustomer>
-                <div className='photo'>
-                  {order?.customer?.photo ? (
-                    <PhotoBlock src={order?.customer?.photo} width='80' height='80' />
-                  ) : (
-                    <FaUserCircle />
-                  )}
-                </div>
+                {showCustomerPhoto && (
+                  <div className='photo'>
+                    {order?.customer?.photo ? (
+                      <PhotoBlock src={order?.customer?.photo} width='80' height='80' />
+                    ) : (
+                      <FaUserCircle />
+                    )}
+                  </div>
+                )}
                 <InfoBlock>
                   <h1>{order?.customer?.name} {order?.customer?.lastname}</h1>
-                  <span>{order?.customer?.address}</span>
+                  {showCustomerAddress && (
+                    <span>{order?.customer?.address}</span>
+                  )}
                 </InfoBlock>
               </OrderCustomer>
               {order?.delivery_type === 1 && (
@@ -374,7 +411,7 @@ const OrderDetailsUI = (props) => {
 
               {order?.driver && (
                 <>
-                  {order?.driver?.location && parseInt(order?.status) === 9 && (
+                  {showBusinessMap && order?.driver?.location && parseInt(order?.status) === 9 && (
                     <Map>
                       <GoogleMapsMap
                         apiKey={configs?.google_maps_api_key?.value}
@@ -390,31 +427,37 @@ const OrderDetailsUI = (props) => {
                     </SectionTitle>
                     <OrderDriver>
                       <WrapperDriver>
-                        <div className='photo'>
-                          {order?.driver?.photo ? (
-                            <PhotoBlock src={order?.driver?.photo} width='70' height='70' />
-                          ) : (
-                            <RiUser2Fill />
-                          )}
-                        </div>
+                        {showDriverPhoto && (
+                          <div className='photo'>
+                            {order?.driver?.photo ? (
+                              <PhotoBlock src={order?.driver?.photo} width='70' height='70' />
+                            ) : (
+                              <RiUser2Fill />
+                            )}
+                          </div>
+                        )}
                         <InfoBlock>
-                          <h1>{order?.driver?.name} {order?.driver?.lastname}</h1>
+                          {showDriverName && (
+                            <h1>{order?.driver?.name} {order?.driver?.lastname}</h1>
+                          )}
                           <span>{t('DRIVER', theme?.defaultLanguages?.DRIVER || 'Driver')}</span>
                         </InfoBlock>
                       </WrapperDriver>
                       <ActionsBlock>
-                        {order.driver && order.driver?.phone &&
+                        {showDriverPhone && order.driver && order.driver?.phone &&
                           <span onClick={() => window.open(`tel:${order.driver.phone}`)}>
                             <FiPhone />
                           </span>}
-                        <MessagesIcon onClick={() => handleOpenMessages({ driver: true, business: false })}>
-                          {order?.unread_count > 0 && unreadAlert?.driver && (
-                            <ExclamationWrapper>
-                              <AiFillExclamationCircle />
-                            </ExclamationWrapper>
-                          )}
-                          <HiOutlineChat />
-                        </MessagesIcon>
+                        {showDriverMessages && (
+                          <MessagesIcon onClick={() => handleOpenMessages({ driver: true, business: false })}>
+                            {order?.unread_count > 0 && unreadAlert?.driver && (
+                              <ExclamationWrapper>
+                                <AiFillExclamationCircle />
+                              </ExclamationWrapper>
+                            )}
+                            <HiOutlineChat />
+                          </MessagesIcon>
+                        )}
                       </ActionsBlock>
                     </OrderDriver>
                   </>

package/src/components/PaymentOptionSquare/index.js

@@ -61,16 +61,14 @@ const PaymentOptionSquareUI = (props) => {
               </div>
             ))
           )}
-          <Container>
+          <Container isLoading={isLoadingMethod || isLoadingPlace}>
             {methodSelected === 'card_payments' && (
               <>
                 <div id='card-container' />
-                {!isLoadingMethod && !isLoadingPlace && (
-                  <Button color='primary' id='card-button' type='button'>{t('ACCEPT', 'Accept')}</Button>
-                )}
+                <Button color='primary' id='card-button' type='button'>{t('ACCEPT', 'Accept')}</Button>
               </>
             )}
-            {methodSelected === 'ach_bank_transfer' && !isLoadingMethod && !isLoadingPlace && (
+            {methodSelected === 'ach_bank_transfer' && (
               <Button color='primary' id='ach-button' type='button'>{t('PAY_WITH_BANK_ACCOUNT', 'Pay with Bank Account')}</Button>
             )}
             {/* {methodSelected === 'digital_wallets' && (
@@ -94,9 +92,7 @@ const PaymentOptionSquareUI = (props) => {
             {methodSelected === 'gift_cards' && (
               <form>
                 <div id='gift-card-container' />
-                {!isLoadingPlace && (
-                  <button id='gift-card-button' type='button'>{t('PAY_WITH_GIFT_CARD', 'Pay with Gift Card')}</button>
-                )}
+                <button id='gift-card-button' type='button'>{t('PAY_WITH_GIFT_CARD', 'Pay with Gift Card')}</button>
               </form>
             )}
             {isLoadingPlace && (

package/src/components/PaymentOptionSquare/styles.js

@@ -1,4 +1,4 @@
-import styled from 'styled-components'
+import styled, { css } from 'styled-components'
 
 export const Container = styled.div`
   width: 100%;
@@ -6,6 +6,9 @@ export const Container = styled.div`
   button{
     width: 100%;
     height: 40px
+    ${({ isLoading }) => isLoading && css`
+      pointer-events: none;
+    `}
   }
 `
 export const Spinner = styled.div`

package/src/components/PaymentOptions/index.js

@@ -179,6 +179,7 @@ const PaymentOptionsUI = (props) => {
 
         {paymethodSelected?.gateway === 'cash' && (
           <PaymentOptionCash
+            data={paymethodSelected?.data}
             orderTotal={cart.total}
             defaultValue={paymethodSelected?.data?.cash}
             onChangeData={handlePaymethodDataChange}
@@ -309,6 +310,7 @@ const PaymentOptionsUI = (props) => {
           <PaymentOptionSquare
             businessId={props.businessId}
             cartTotal={cart?.total}
+            data={isOpenMethod?.paymethod?.credentials}
             body={{
               paymethod_id: isOpenMethod?.paymethod?.id,
               amount: cart.total,
@@ -316,6 +318,7 @@ const PaymentOptionsUI = (props) => {
               cartUuid: cart.uuid
             }}
             onPlaceOrderClick={onPlaceOrderClick}
+            setCreateOrder={setCreateOrder}
           />
         </Modal>
       </PaymentMethodsContainer>

package/src/components/ProductItemAccordion/index.js

@@ -2,7 +2,7 @@ import React, { useState, useRef } from 'react'
 import TiPencil from '@meronex/icons/ti/TiPencil'
 import IosArrowDown from '@meronex/icons/ios/IosArrowDown'
 import VscTrash from '@meronex/icons/vsc/VscTrash'
-import { useUtils, useLanguage, useOrder } from 'ordering-components-external'
+import { useUtils, useLanguage, useOrder, useOrderingTheme } from 'ordering-components-external'
 import { useWindowSize } from '../../hooks/useWindowSize'
 
 import {
@@ -41,7 +41,7 @@ export const ProductItemAccordion = (props) => {
   const [orderState] = useOrder()
   const [{ parsePrice }] = useUtils()
   const windowSize = useWindowSize()
-
+  const [orderingTheme] = useOrderingTheme()
   const [setActive, setActiveState] = useState('')
   const [setHeight, setHeightState] = useState('0px')
   const [setRotate, setRotateState] = useState('accordion__icon')
@@ -51,6 +51,8 @@ export const ProductItemAccordion = (props) => {
   const productActionsEdit = useRef(null)
   const productActionsDelete = useRef(null)
 
+  const showProductImage = !orderingTheme?.theme?.confirmation?.components?.cart?.components?.products?.components?.image?.hidden
+
   const productInfo = () => {
     if (isCartProduct) {
       const ingredients = JSON.parse(JSON.stringify(Object.values(product.ingredients ?? {})))
@@ -130,7 +132,7 @@ export const ProductItemAccordion = (props) => {
                 {product?.quantity}
               </ProductQuantity>
             )}
-            {product?.images && (
+            {product?.images && showProductImage && (
               <WrapperProductImage>
                 <ProductImage bgimage={product?.images} />
               </WrapperProductImage>

package/src/components/RenderProductsLayout/SearchProducts/index.js

@@ -3,7 +3,7 @@ import React from 'react'
 import { Select } from '../../../styles/Select'
 import { SearchBar } from '../../SearchBar'
 import { useTheme } from 'styled-components'
-import { useLanguage } from 'ordering-components-external'
+import { useLanguage, useOrderingTheme } from 'ordering-components-external'
 
 export const SearchProducts = (props) => {
   const {
@@ -17,7 +17,8 @@ export const SearchProducts = (props) => {
 
   const theme = useTheme()
   const [, t] = useLanguage()
-  const showSort = !theme?.layouts?.business_view?.components?.basic_information?.components?.sort?.hidden
+  const [orderingTheme] = useOrderingTheme()
+  const showSort = !orderingTheme?.theme?.business_view?.components?.header?.components?.business?.components?.sort?.hidden
 
   return (
     <>

package/src/components/RenderProductsLayout/index.js

@@ -10,11 +10,9 @@ import { BusinessProductsCategories as CategoriesLayoutGroceries } from '../Busi
 import { BusinessProductsList as ProductListLayoutGroceries } from '../BusinessProductsList/layouts/groceries'
 import { Modal } from '../Modal'
 import { Cart } from '../Cart'
-import { SearchBar } from '../SearchBar'
 import { NotFoundSource } from '../NotFoundSource'
 import { Button } from '../../styles/Buttons'
-import { Select } from '../../styles/Select'
-
+import { SearchProducts } from './SearchProducts'
 import {
   Title,
   WrappLayout,
@@ -111,18 +109,13 @@ export const RenderProductsLayout = (props) => {
                   <>
                     {(categoryState.products.length !== 0 || searchValue) && (
                       <WrapperSearch>
-                        <SearchBar
-                          onSearch={handleChangeSearch}
-                          search={searchValue}
-                          placeholder={t('SEARCH_PRODUCTS', theme?.defaultLanguages?.SEARCH_PRODUCTS || 'Search Products')}
-                          lazyLoad={businessState?.business?.lazy_load_products_recommended}
-                        />
-                        <Select
-                          notAsync
-                          notReload
-                          options={sortByOptions}
-                          defaultValue={sortByValue}
+                        <SearchProducts
+                          handleChangeSearch={handleChangeSearch}
+                          searchValue={searchValue}
+                          sortByOptions={sortByOptions}
+                          sortByValue={sortByValue}
                           onChange={(val) => handleChangeSortBy && handleChangeSortBy(val)}
+                          businessState={businessState}
                         />
                       </WrapperSearch>
                     )}
@@ -197,18 +190,13 @@ export const RenderProductsLayout = (props) => {
                         : 'hidden'
                     }}
                   >
-                    <SearchBar
-                      onSearch={handleChangeSearch}
-                      search={searchValue}
-                      placeholder={t('SEARCH_PRODUCTS', theme?.defaultLanguages?.SEARCH_PRODUCTS || 'Search Products')}
-                      lazyLoad={businessState?.business?.lazy_load_products_recommended}
-                    />
-                    <Select
-                      notAsync
-                      notReload
-                      options={sortByOptions}
-                      defaultValue={sortByValue}
+                    <SearchProducts
+                      handleChangeSearch={handleChangeSearch}
+                      searchValue={searchValue}
+                      sortByOptions={sortByOptions}
+                      sortByValue={sortByValue}
                       onChange={(val) => handleChangeSortBy && handleChangeSortBy(val)}
+                      businessState={businessState}
                     />
                   </WrapperSearch>
                   <BusinessContent>

package/src/components/SignUpForm/index.js

@@ -178,7 +178,9 @@ const SignUpFormUI = (props) => {
   const handleChangeInputEmail = (e) => {
     handleChangeInput({ target: { name: 'email', value: e.target.value.toLowerCase().replace(/[&,()%";:ç?<>{}\\[\]\s]/g, '') } })
     formMethods.setValue('email', e.target.value.toLowerCase().replace(/[&,()%";:ç?<>{}\\[\]\s]/g, ''))
-    emailInput.current.value = e.target.value.toLowerCase().replace(/[&,()%";:ç?<>{}\\[\]\s]/g, '')
+    if (emailInput?.current) {
+      emailInput.current.value = e.target.value.toLowerCase().replace(/[&,()%";:ç?<>{}\\[\]\s]/g, '')
+    }
   }
 
   useEffect(() => {
@@ -425,7 +427,7 @@ const SignUpFormUI = (props) => {
             <>
               {Object.keys(configs).length > 0 ? (
                 <SocialButtons isPopup={isPopup}>
-                  { isFacebookLogin && configs?.facebook_id?.value && (
+                  {isFacebookLogin && configs?.facebook_id?.value && (
                     <FacebookLoginButton
                       appId={configs?.facebook_id?.value}
                       handleSuccessFacebookLogin={handleSuccessFacebook}

package/src/components/SingleProductCard/index.js

@@ -21,7 +21,7 @@ export const SingleProductCard = (props) => {
     isSkeleton,
     onProductClick,
     isCartOnProductsList,
-    productAddedToCart,
+    productAddedToCartLength,
     productToIdLoading,
     useCustomFunctionality,
     onCustomClick,
@@ -61,9 +61,9 @@ export const SingleProductCard = (props) => {
       >
         {!useCustomFunctionality && (
           <>
-            {!isSkeleton && productAddedToCart && productAddedToCart?.quantity > 0 && (
+            {!isSkeleton && productAddedToCartLength > 0 && (
               <QuantityContainer>
-                <span>{productAddedToCart?.quantity}</span>
+                <span>{productAddedToCartLength}</span>
               </QuantityContainer>
             )}
             <CardInfo soldOut={isSoldOut || maxProductQuantity <= 0}>

package/src/components/TaxInformation/index.js

@@ -20,7 +20,7 @@ export const TaxInformation = (props) => {
         ? (product.tax?.id ? product.tax?.id === data?.id : product.tax?.id === null && data?.id === null)
         : type === 'fee'
           ? (product.fee?.id ? product.fee?.id === data?.id : (product.fee?.id === null && data?.id === null))
-          : Object.keys(data?.discounts ?? {}).map(code => code.includes(product?.code)) && product?.offers?.find(offer => offer?.name === data?.name)
+          : Object.keys(data?.discounts ?? {}).find(code => code.includes(product?.code))
     )
   }
 

package/src/components/UserFormDetails/index.js

@@ -1,6 +1,6 @@
 import React, { useEffect, useState, useRef } from 'react'
 import Skeleton from 'react-loading-skeleton'
-import { useSession, useLanguage, useCustomer } from 'ordering-components-external'
+import { useSession, useLanguage, useCustomer, useOrderingTheme } from 'ordering-components-external'
 import { useForm } from 'react-hook-form'
 import parsePhoneNumber from 'libphonenumber-js'
 
@@ -26,17 +26,18 @@ export const UserFormDetailsUI = (props) => {
     handleButtonUpdateClick,
     isCheckout,
     userData,
-    isCustomerMode
+    isCustomerMode,
+    isOriginalLayout
   } = props
 
   const formMethods = useForm()
   const [, t] = useLanguage()
-
   const [{ user: userSession }] = useSession()
   const [isValidPhoneNumber, setIsValidPhoneNumber] = useState(null)
   const [userPhoneNumber, setUserPhoneNumber] = useState(null)
   const [alertState, setAlertState] = useState({ open: false, content: [] })
   const [, { setUserCustomer }] = useCustomer()
+  const [orderingTheme] = useOrderingTheme()
   const emailInput = useRef(null)
 
   const user = userData || userSession
@@ -50,6 +51,8 @@ export const UserFormDetailsUI = (props) => {
   }
 
   const showInputPhoneNumber = validationFields?.fields?.checkout?.cellphone?.enabled ?? false
+  const showCustomerCellphone = !orderingTheme?.theme?.profile?.components?.cellphone?.hidden
+  const showCustomerPassword = !orderingTheme?.theme?.profile?.components?.password?.hidden
 
   const setUserCellPhone = (isEdit = false) => {
     if (userPhoneNumber && !userPhoneNumber.includes('null') && !isEdit) {
@@ -150,7 +153,13 @@ export const UserFormDetailsUI = (props) => {
   const handleChangeInputEmail = (e) => {
     handleChangeInput({ target: { name: 'email', value: e.target.value.toLowerCase().replace(/[&,()%";:ç?<>{}\\[\]\s]/g, '') } })
     formMethods.setValue('email', e.target.value.toLowerCase().replace(/[&,()%";:ç?<>{}\\[\]\s]/g, ''))
-    emailInput.current.value = e.target.value.toLowerCase().replace(/[&,()%";:ç?<>{}\\[\]\s]/g, '')
+    if (emailInput?.current) {
+      emailInput.current.value = e.target.value.toLowerCase().replace(/[&,()%";:ç?<>{}\\[\]\s]/g, '')
+    }
+  }
+
+  const showFieldWithTheme = (name) => {
+    return !orderingTheme?.theme?.profile?.components?.[name]?.hidden
   }
 
   useEffect(() => {
@@ -220,17 +229,17 @@ export const UserFormDetailsUI = (props) => {
         {!validationFields?.loading ? (
           <>
             {
-            props.beforeMidElements?.map((BeforeMidElements, i) => (
-              <React.Fragment key={i}>
-                {BeforeMidElements}
-              </React.Fragment>))
+              props.beforeMidElements?.map((BeforeMidElements, i) => (
+                <React.Fragment key={i}>
+                  {BeforeMidElements}
+                </React.Fragment>))
             }
             {
-            props.beforeMidComponents?.map((BeforeMidComponents, i) => (
-              <BeforeMidComponents key={i} {...props} />))
+              props.beforeMidComponents?.map((BeforeMidComponents, i) => (
+                <BeforeMidComponents key={i} {...props} />))
             }
             {sortInputFields({ values: validationFields?.fields?.checkout }).map(field =>
-              showField && showField(field.code) && (
+              showField && showField(field.code) && showFieldWithTheme(field.code) && (
                 <React.Fragment key={field.id}>
                   {field.code === 'email' ? (
                     <Input
@@ -241,9 +250,9 @@ export const UserFormDetailsUI = (props) => {
                       disabled={!isEdit}
                       placeholder={t(field.code.toUpperCase(), field?.name)}
                       defaultValue={
-                      formState?.result?.result
-                        ? formState?.result?.result[field.code]
-                        : formState?.changes[field.code] ?? (user && user[field.code]) ?? ''
+                        formState?.result?.result
+                          ? formState?.result?.result[field.code]
+                          : formState?.changes[field.code] ?? (user && user[field.code]) ?? ''
                       }
                       onChange={handleChangeInputEmail}
                       ref={(e) => {
@@ -260,9 +269,9 @@ export const UserFormDetailsUI = (props) => {
                       disabled={!isEdit}
                       placeholder={t(field.code.toUpperCase(), field?.name)}
                       defaultValue={
-                      formState?.result?.result
-                        ? formState?.result?.result[field.code]
-                        : formState?.changes[field.code] ?? (user && user[field.code]) ?? ''
+                        formState?.result?.result
+                          ? formState?.result?.result[field.code]
+                          : formState?.changes[field.code] ?? (user && user[field.code]) ?? ''
                       }
                       onChange={handleChangeInput}
                       ref={formMethods.register({
@@ -277,7 +286,7 @@ export const UserFormDetailsUI = (props) => {
                 </React.Fragment>
               )
             )}
-            {!!showInputPhoneNumber && (
+            {!!showInputPhoneNumber && showCustomerCellphone && (
               <InputPhoneNumber
                 user={user}
                 value={userPhoneNumber}
@@ -286,7 +295,7 @@ export const UserFormDetailsUI = (props) => {
                 disabled={!isEdit}
               />
             )}
-            {!isCheckout && (
+            {!isCheckout && showCustomerPassword && (
               <Input
                 type='password'
                 name='password'
@@ -306,17 +315,17 @@ export const UserFormDetailsUI = (props) => {
               />
             )}
             {
-            props.afterMidElements?.map((MidElement, i) => (
-              <React.Fragment key={i}>
-                {MidElement}
-              </React.Fragment>))
+              props.afterMidElements?.map((MidElement, i) => (
+                <React.Fragment key={i}>
+                  {MidElement}
+                </React.Fragment>))
             }
             {
-             props.afterMidComponents?.map((MidComponent, i) => (
-               <MidComponent key={i} {...props} />))
+              props.afterMidComponents?.map((MidComponent, i) => (
+                <MidComponent key={i} {...props} />))
             }
             <ActionsForm>
-              {onCancel && (
+              {onCancel && !isOriginalLayout && (
                 <Button
                   outline
                   type='button'