ordering-ui-external 1.0.0 → 1.1.1

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

@@ -48,7 +48,9 @@ const ForgotPasswordUI = (props) => {
   const handleChangeInputEmail = (e) => {
     hanldeChangeInput({ 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(() => {

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

@@ -140,7 +140,9 @@ const LoginFormUI = (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 handleChangePhoneNumber = (number, isValid) => {

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

@@ -139,7 +139,9 @@ const SignUpBusinessUI = (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(() => {

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

@@ -145,7 +145,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(() => {

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

@@ -157,7 +157,9 @@ 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, '')
+    }
   }
 
   useEffect(() => {
@@ -228,14 +230,14 @@ 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} />))
             }
             <Divider />
             {sortInputFields({ values: validationFields?.fields?.checkout }).map(field =>
@@ -253,9 +255,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) => {
@@ -276,9 +278,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({
@@ -331,14 +333,14 @@ export const UserFormDetailsUI = (props) => {
             )}
             <Divider />
             {
-            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>
               {((formState && Object.keys(formState?.changes).length > 0 && isEdit) || formState?.loading) && (

package/src/themes/eight/src/components/BusinessProductsList/index.js

@@ -52,7 +52,7 @@ const BusinessProductsListUI = (props) => {
                   businessId={businessId}
                   onProductClick={onProductClick}
                   isCartOnProductsList={isCartOnProductsList}
-                  productAddedToCart={currentCart?.products?.find(Cproduct => Cproduct.id === product.id)}
+                  productAddedToCartLength={currentCart?.products?.reduce((productsLength, Cproduct) => { return productsLength + (Cproduct?.id === product?.id ? Cproduct?.quantity : 0) }, 0)}
                 />
               ))
             }
@@ -75,7 +75,7 @@ const BusinessProductsListUI = (props) => {
                           businessId={businessId}
                           onProductClick={onProductClick}
                           isCartOnProductsList={isCartOnProductsList}
-                          productAddedToCart={currentCart?.products?.find(Cproduct => Cproduct.id === product.id)}
+                          productAddedToCartLength={currentCart?.products?.reduce((productsLength, Cproduct) => { return productsLength + (Cproduct?.id === product?.id ? Cproduct?.quantity : 0) }, 0)}
                         />
                       ))}
                     </ProductsListing>
@@ -105,7 +105,7 @@ const BusinessProductsListUI = (props) => {
                               product={product}
                               onProductClick={onProductClick}
                               isCartOnProductsList={isCartOnProductsList}
-                              productAddedToCart={currentCart?.products?.find(Cproduct => Cproduct.id === product.id)}
+                              productAddedToCartLength={currentCart?.products?.reduce((productsLength, Cproduct) => { return productsLength + (Cproduct?.id === product?.id ? Cproduct?.quantity : 0) }, 0)}
                             />
                           ))
                         }

package/src/themes/eight/src/components/LoginForm/index.js

@@ -151,7 +151,9 @@ const LoginFormUI = (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 handleChangePhoneNumber = (number, isValid) => {
@@ -269,26 +271,26 @@ const LoginFormUI = (props) => {
                 {(configs?.facebook_login?.value === 'true' ||
                   configs?.facebook_login?.value === '1') &&
                   configs?.facebook_id?.value &&
-                (
-                  <FacebookLoginButton
-                    appId={configs?.facebook_id?.value}
-                    handleSuccessFacebookLogin={handleSuccessFacebook}
-                  />
-                )}
+                  (
+                    <FacebookLoginButton
+                      appId={configs?.facebook_id?.value}
+                      handleSuccessFacebookLogin={handleSuccessFacebook}
+                    />
+                  )}
                 {configs?.apple_login_client_id?.value &&
-                (
-                  <AppleLogin
-                    onSuccess={handleSuccessApple}
-                    onFailure={(data) => console.log('onFailure', data)}
-                  />
-                )}
+                  (
+                    <AppleLogin
+                      onSuccess={handleSuccessApple}
+                      onFailure={(data) => console.log('onFailure', data)}
+                    />
+                  )}
                 {useLoginByCellphone && loginTab === 'cellphone' &&
-               configs && Object.keys(configs).length > 0 && (configs?.twilio_service_enabled?.value === 'true' ||
-                configs?.twilio_service_enabled?.value === '1') && (
-                  <SmsLoginButton
-                    handleSmsLogin={() => { setLoginWithOtpState(true) }}
-                  />
-                )}
+                  configs && Object.keys(configs).length > 0 && (configs?.twilio_service_enabled?.value === 'true' ||
+                    configs?.twilio_service_enabled?.value === '1') && (
+                    <SmsLoginButton
+                      handleSmsLogin={() => { setLoginWithOtpState(true) }}
+                    />
+                  )}
               </SocialButtons>
             ) : (
               <SkeletonSocialWrapper>
@@ -331,14 +333,14 @@ const LoginFormUI = (props) => {
               isPopup={isPopup}
             >
               {
-              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} />))
               }
               {useLoginByEmail && loginTab === 'email' && (
                 <CustomInputContainer
@@ -360,7 +362,7 @@ const LoginFormUI = (props) => {
                 <InputPhoneNumber
                   value={credentials?.cellphone}
                   setValue={handleChangePhoneNumber}
-                  handleIsValid={() => {}}
+                  handleIsValid={() => { }}
                 />
               )}
 
@@ -416,14 +418,14 @@ const LoginFormUI = (props) => {
                 </WrapperPassword>
               )}
               {
-              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} />))
               }
               {!loginWithOtpState && (
                 <RedirectLink isPopup={isPopup}>

package/src/themes/eight/src/components/SignUpForm/index.js

@@ -67,7 +67,7 @@ const SignUpFormUI = (props) => {
   const [, { login }] = useSession()
   const emailInput = useRef(null)
   const isFacebookLogin = configs?.facebook_login?.value === 'true'
-  
+
   const [userPhoneNumber, setUserPhoneNumber] = useState('')
   const [isValidPhoneNumber, setIsValidPhoneNumber] = useState(null)
   const [passwordSee, setPasswordSee] = useState(false)
@@ -175,7 +175,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(() => {

package/src/themes/eight/src/components/SingleProductCard/index.js

@@ -22,7 +22,7 @@ export const SingleProductCard = (props) => {
     isSkeleton,
     onProductClick,
     isCartOnProductsList,
-    productAddedToCart
+    productAddedToCartLength
   } = props
 
   const [, t] = useLanguage()
@@ -61,9 +61,9 @@ export const SingleProductCard = (props) => {
       >
         {!isSkeleton ? (
           <WrapLogo>
-            {!isSkeleton && productAddedToCart && productAddedToCart?.quantity > 0 && (
+            {!isSkeleton && productAddedToCartLength > 0 && (
               <QuantityContainer>
-                <span>{productAddedToCart?.quantity}</span>
+                <span>{productAddedToCartLength}</span>
               </QuantityContainer>
             )}
             <CardLogo

package/src/themes/five/index.js

@@ -28,7 +28,7 @@ import { FacebookLoginButton } from './src/components/FacebookLogin'
 import { Favorite } from './src/components/Favorite'
 import { Footer } from './src/components/Footer'
 import { ForgotPasswordForm } from './src/components/ForgotPasswordForm'
-import { GoogleLogin } from './src/components/GoogleLogin'
+import { GoogleLoginButton } from './src/components/GoogleLogin'
 import { Header } from './src/components/Header'
 import { Header as HeaderKiosk } from './src/components/Header/layouts/Kiosk'
 import { HeaderOption } from './src/components/HeaderOption'
@@ -69,6 +69,7 @@ import { ProductIngredient } from './src/components/ProductIngredient'
 import { PhoneAutocomplete } from './src/components/PhoneAutocomplete'
 import { ProductOption } from './src/components/ProductOption'
 import { ProductOptionSubOption } from './src/components/ProductOptionSubOption'
+import { ProfileOptions } from './src/components/UserProfileForm/ProfileOptions'
 import { Promotions } from './src/components/Promotions'
 import { RenderProductsLayout } from './src/components/RenderProductsLayout'
 import { ResetPassword } from './src/components/ResetPassword'
@@ -86,9 +87,15 @@ import { UserDetails } from './src/components/UserDetails'
 import { UserPopover } from './src/components/UserPopover'
 import { UserProfileForm } from './src/components/UserProfileForm'
 import { UserVerification } from './src/components/UserVerification'
+import { VerifyCodeForm } from './src/components/VerifyCodeForm'
 import { Wallets } from './src/components/Wallets'
 import { WalletTransactionItem } from './src/components/WalletTransactionItem'
 import { BusinessListingSearch } from './src/components/BusinessListingSearch'
+import { ReviewTrigger } from './src/components/ReviewTrigger'
+import { ReviewOrder } from './src/components/ReviewOrder'
+import { ReviewDriver } from './src/components/ReviewDriver'
+import { ReviewProduct } from './src/components/ReviewProduct'
+
 import { Button } from './src/styles/Buttons'
 import { Input, TextArea } from './src/styles/Inputs'
 import { Select } from './src/styles/Select'
@@ -126,7 +133,7 @@ export {
   Favorite,
   Footer,
   ForgotPasswordForm,
-  GoogleLogin,
+  GoogleLoginButton,
   Header,
   HeaderKiosk,
   HeaderOption,
@@ -165,6 +172,7 @@ export {
   ProductIngredient,
   ProductItemAccordion,
   ProductOption,
+  ProfileOptions,
   ProductOptionSubOption,
   Promotions,
   PhoneAutocomplete,
@@ -184,8 +192,13 @@ export {
   UserPopover,
   UserProfileForm,
   UserVerification,
+  VerifyCodeForm,
   Wallets,
   WalletTransactionItem,
+  ReviewTrigger,
+  ReviewOrder,
+  ReviewDriver,
+  ReviewProduct,
 
   // styles
   Button,

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

@@ -30,14 +30,6 @@ const AddressDetailsUI = (props) => {
   const userCustomer = JSON.parse(window.localStorage.getItem('user-customer'))
   const [{ user }] = useCustomer()
 
-  const handleFindBusinesses = () => {
-    if (!orderState?.options?.address?.location) {
-      setAlertState({ open: true, content: [t('SELECT_AN_ADDRESS_TO_SEARCH', 'Select or add an address to search')] })
-      return
-    }
-    setOpenModal(false)
-  }
-
   useEffect(() => {
     return () => setOpenModal(false)
   }, [])
@@ -67,7 +59,6 @@ const AddressDetailsUI = (props) => {
         )}
 
         <Modal
-          title={t('ADDRESSES', 'Addresses')}
           open={openModal}
           width='70%'
           onClose={() => setOpenModal(false)}
@@ -77,7 +68,6 @@ const AddressDetailsUI = (props) => {
             changeOrderAddressWithDefault
             userId={isNaN(userCustomer?.id) ? null : userCustomer?.id}
             onCancel={() => setOpenModal(false)}
-            onAccept={() => handleFindBusinesses()}
             userCustomerSetup={isCustomerMode && user}
             isFromCheckout={isFromCheckout}
             isCustomerMode={isCustomerMode}

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

@@ -16,7 +16,8 @@ import {
   GoogleMapsMap,
   useSession,
   useOrder,
-  useConfig
+  useConfig,
+  useOrderingTheme
 } from 'ordering-components-external'
 import { Alert } from '../Confirm'
 import { GoogleGpsButton } from '../../../../../components/GoogleGpsButton'
@@ -62,7 +63,7 @@ const AddressFormUI = (props) => {
   const [, t] = useLanguage()
   const formMethods = useForm()
   const [{ auth }] = useSession()
-
+  const [orderingTheme] = useOrderingTheme()
   const [state, setState] = useState({ selectedFromAutocomplete: true })
   const [addressTag, setAddressTag] = useState(addressState?.address?.tag)
   const [alertState, setAlertState] = useState({ open: false, content: [] })
@@ -76,10 +77,13 @@ const AddressFormUI = (props) => {
       : formState.changes?.location ?? null
   )
 
+  const isHideMap = orderingTheme?.theme?.header?.components?.address_form?.components?.map?.hidden
+  const isHideIcons = orderingTheme?.theme?.header?.components?.address_form?.components?.icons?.hidden
+
   const maxLimitLocation = configState?.configs?.meters_to_change_address?.value
   const googleMapsApiKey = configState?.configs?.google_maps_api_key?.value
   const isLocationRequired = configState.configs?.google_autocomplete_selection_required?.value === '1' ||
-                              configState.configs?.google_autocomplete_selection_required?.value === 'true'
+    configState.configs?.google_autocomplete_selection_required?.value === 'true'
 
   const mapErrors = {
     ERROR_NOT_FOUND_ADDRESS: 'Sorry, we couldn\'t find an address',
@@ -247,6 +251,10 @@ const AddressFormUI = (props) => {
     })
   }
 
+  const showFieldWithTheme = (name) => {
+    return !orderingTheme?.theme?.header?.components?.address_form?.components?.[name]?.hidden
+  }
+
   useEffect(() => {
     if (!auth) {
       setLocationChange(formState?.changes?.location ?? orderState?.options?.address?.location ?? '')
@@ -255,8 +263,8 @@ const AddressFormUI = (props) => {
         formMethods.setValue(
           field.name,
           formState?.changes[field.name] ||
-            (orderState?.options?.address && orderState?.options?.address[field.name]) ||
-            ''
+          (orderState?.options?.address && orderState?.options?.address[field.name]) ||
+          ''
         )
       )
       return
@@ -406,7 +414,7 @@ const AddressFormUI = (props) => {
                   />
                 </AddressWrap>
 
-                {locationChange && (addressState?.address?.location || formState?.changes?.location) && (
+                {!isHideMap && locationChange && (addressState?.address?.location || formState?.changes?.location) && (
                   <WrapperMap>
                     <GoogleMapsMap
                       apiKey={googleMapsApiKey}
@@ -422,51 +430,56 @@ const AddressFormUI = (props) => {
               </React.Fragment>
             ) : (
               <React.Fragment key={field.name}>
-                {field.name !== 'address_notes' ? (
-                  <Input
-                    className={field.name}
-                    placeholder={t(field.name.toUpperCase(), field.code)}
-                    value={formState.changes?.[field.name] ?? addressState.address?.[field.name] ?? ''}
-                    onChange={(e) => {
-                      formMethods.setValue(field.name, e.target.value)
-                      handleChangeInput({ target: { name: field.name, value: e.target.value } })
-                    }}
-                    autoComplete='new-field'
-                    maxLength={30}
-                  />
-                ) : (
-                  <TextArea
-                    rows={4}
-                    placeholder={t('ADDRESS_NOTES', 'Address Notes')}
-                    value={formState.changes?.address_notes ?? addressState.address.address_notes ?? ''}
-                    onChange={(e) => {
-                      formMethods.setValue('address_notes', e.target.value)
-                      handleChangeInput({ target: { name: 'address_notes', value: e.target.value } })
-                    }}
-                    autoComplete='new-field'
-                    maxLength={250}
-                  />
+                {(isRequiredField(field.name) || showFieldWithTheme(field.name)) && (
+                  <>
+                    {field.name !== 'address_notes' ? (
+                      <Input
+                        className={field.name}
+                        placeholder={t(field.name.toUpperCase(), field.code)}
+                        value={formState.changes?.[field.name] ?? addressState.address?.[field.name] ?? ''}
+                        onChange={(e) => {
+                          formMethods.setValue(field.name, e.target.value)
+                          handleChangeInput({ target: { name: field.name, value: e.target.value } })
+                        }}
+                        autoComplete='new-field'
+                        maxLength={30}
+                      />
+                    ) : (
+                      <TextArea
+                        rows={3}
+                        placeholder={t('ADDRESS_NOTES', 'Address Notes')}
+                        value={formState.changes?.address_notes ?? addressState.address.address_notes ?? ''}
+                        onChange={(e) => {
+                          formMethods.setValue('address_notes', e.target.value)
+                          handleChangeInput({ target: { name: 'address_notes', value: e.target.value } })
+                        }}
+                        autoComplete='new-field'
+                        maxLength={250}
+                      />
+                    )}
+                  </>
                 )}
               </React.Fragment>
             )
           ))}
 
           {!formState.loading && formState.error && <p style={{ color: '#c10000' }}>{formState.error}</p>}
-
-          <AddressTagSection>
-            <Button className={addressTag === 'home' ? 'active' : ''} bgtransparent type='button' onClick={() => handleAddressTag('home')}>
-              <span><House /></span>
-            </Button>
-            <Button className={addressTag === 'office' ? 'active' : ''} bgtransparent type='button' onClick={() => handleAddressTag('office')}>
-              <span><Building /></span>
-            </Button>
-            <Button className={addressTag === 'favorite' ? 'active' : ''} bgtransparent type='button' onClick={() => handleAddressTag('favorite')}>
-              <span><Heart /></span>
-            </Button>
-            <Button className={addressTag === 'other' ? 'active' : ''} bgtransparent type='button' onClick={() => handleAddressTag('other')}>
-              <span><PlusLg /></span>
-            </Button>
-          </AddressTagSection>
+          {!isHideIcons && (
+            <AddressTagSection>
+              <Button className={addressTag === 'home' ? 'active' : ''} bgtransparent type='button' onClick={() => handleAddressTag('home')}>
+                <span><House /></span>
+              </Button>
+              <Button className={addressTag === 'office' ? 'active' : ''} bgtransparent type='button' onClick={() => handleAddressTag('office')}>
+                <span><Building /></span>
+              </Button>
+              <Button className={addressTag === 'favorite' ? 'active' : ''} bgtransparent type='button' onClick={() => handleAddressTag('favorite')}>
+                <span><Heart /></span>
+              </Button>
+              <Button className={addressTag === 'other' ? 'active' : ''} bgtransparent type='button' onClick={() => handleAddressTag('other')}>
+                <span><PlusLg /></span>
+              </Button>
+            </AddressTagSection>
+          )}
           {
             props.afterMidElements?.map((MidElement, i) => (
               <React.Fragment key={i}>

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

@@ -192,7 +192,7 @@ export const AddressTagSection = styled.div`
 
 export const WrapperMap = styled.div`
   width: 100%;
-  height: 250px;
+  height: 170px;
   > div {
     position: relative !important;
     width: 100% !important;