ordering-ui-external 1.5.5 → 1.6.1

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

@@ -33,7 +33,6 @@ import { Confirm } from '../Confirm'
 import {
   Container,
   WrapperContainer,
-  HeaderInfo,
   Content,
   OrderBusiness,
   BusinessWrapper,
@@ -52,7 +51,6 @@ import {
   ShareOrder,
   WrapperLeftContainer,
   WrapperRightContainer,
-  MyOrderActions,
   ReviewOrderLink,
   SkeletonWrapper,
   ReviewWrapper,
@@ -67,6 +65,7 @@ import {
   LinkWrapper,
   MapWrapper,
   BusinessExternalWrapper,
+  DirectionButtonWrapper,
   ProfessionalWrapper,
   ProfessionalBlock
 } from './styles'
@@ -76,6 +75,8 @@ import { TaxInformation } from '../TaxInformation'
 import { getGoogleMapImage } from '../../../../../utils'
 import { OrderHistory } from './OrderHistory'
 import { ReviewProfessional } from '../ReviewProfessional'
+import { OrderActionsSection } from './OrderActionsSection'
+import { OrderHeaderInfoSection } from './OrderHeaderInfoSection'
 
 const OrderDetailsUI = (props) => {
   const {
@@ -142,6 +143,7 @@ const OrderDetailsUI = (props) => {
   const showCustomerPhone = !orderingTheme?.theme?.confirmation?.components?.customer?.components?.phone?.hidden
   const showCustomerAddress = !orderingTheme?.theme?.confirmation?.components?.customer?.components?.address?.hidden
   const showCustomerEmail = !orderingTheme?.theme?.confirmation?.components?.customer?.components?.email?.hidden
+  const showCustomerPhoto = !orderingTheme?.theme?.confirmation?.components?.customer?.components?.photo?.hidden
 
   const getOrderStatus = (s) => {
     const status = parseInt(s)
@@ -177,6 +179,9 @@ const OrderDetailsUI = (props) => {
     return objectStatus && objectStatus
   }
 
+  const validTrackingStatus = [9, 19, 23]
+  const mapConfigs = { zoom: 15 }
+
   const handleGoToPage = (data) => {
     events.emit('go_to_page', data)
   }
@@ -337,9 +342,19 @@ const OrderDetailsUI = (props) => {
     setUnreadAlert
   }
 
+  const driverLocationString = typeof order?.driver?.location?.location === 'string' && order?.driver?.location?.location?.split(',').map((l) => l.replace(/[^-.0-9]/g, ''))
+  const parsedLocations = locations.map(location => typeof location?.location === 'string' ? {
+    ...location,
+    lat: parseFloat(location?.location?.split(',')[0].replace(/[^-.0-9]/g, '')),
+    lng: parseFloat(location?.location?.split(',')[1].replace(/[^-.0-9]/g, ''))
+  } : location)
+
   useEffect(() => {
     if (driverLocation) {
-      locations[0] = driverLocation
+      parsedLocations[0] = {
+        ...locations[0],
+        ...driverLocation
+      }
     }
   }, [driverLocation])
 
@@ -382,70 +397,6 @@ const OrderDetailsUI = (props) => {
     businessLogoUrlValidation()
   }, [order])
 
-  const OrderMapSection = (props) => {
-    const validStatuses = props.validStatuses ?? [9, 19, 23]
-    const location = props.location ?? order?.driver?.location
-    const mapConfigs = { zoom: 15 }
-    return (
-      showBusinessMap ? (
-        props.isMapImg ? (
-          <Map style={props.mapStyle}>
-            <img
-              src={getGoogleMapImage(location, googleMapsApiKey, mapConfigs)}
-              id='google-maps-image'
-              alt='google-maps-location'
-              width='100%'
-              height='100%'
-              loading='lazy'
-            />
-          </Map>
-        ) : (
-          location?.lat && location?.lng && validStatuses.includes(parseInt(order?.status)) ? (
-            <>
-              <Map style={props.mapStyle}>
-                <GoogleMapsMap
-                  apiKey={configs?.google_maps_api_key?.value}
-                  location={location}
-                  locations={!props.location && locations}
-                  mapControls={googleMapsControls}
-                />
-              </Map>
-            </>
-          ) : null
-        )
-      ) : null
-    )
-  }
-
-  const OrderHeaderInfoSection = () => {
-    return (
-      <HeaderInfo>
-        <h1>{isService ? t('SERVICES', 'Services') : t('ORDER_MESSAGE_RECEIVED', theme?.defaultLanguages?.ORDER_MESSAGE_RECEIVED || 'Your order has been received')}</h1>
-        <p>{!isService && t('ORDER_MESSAGE_HEADER_TEXT', theme?.defaultLanguages?.ORDER_MESSAGE_HEADER_TEXT || 'Once business accepts your order, we will send you an email, thank you!')}</p>
-      </HeaderInfo>
-    )
-  }
-
-  const OrderActionsSection = () => {
-    return (
-      <>
-        {!userCustomerId && (
-          <MyOrderActions>
-            <Button
-              color='primary'
-              outline
-              onClick={() => handleGoToPage({ page: 'orders' })}
-            >
-              {isService
-                ? t('YOUR_APPOINTMENTS', 'Your appointments')
-                : t('YOUR_ORDERS', theme?.defaultLanguages?.YOUR_ORDERS || 'Your Orders')}
-            </Button>
-          </MyOrderActions>
-        )}
-      </>
-    )
-  }
-
   return (
     <Container>
       {!loading && order && Object.keys(order).length > 0 && !(openMessages.driver || openMessages.business) && (
@@ -484,33 +435,33 @@ const OrderDetailsUI = (props) => {
                     }
                   </p>
                 )}
-                {(
-                  acceptedStatus.includes(parseInt(order?.status, 10)) ||
+                {(acceptedStatus.includes(parseInt(order?.status, 10)) ||
                   !isOriginalLayout
-                ) && (
-                  <ReOrder>
-                    <Button
-                      color='primary'
-                      outline
-                      onClick={() => handleStartNewOrder(order.id)}
-                      disabled={reorderState?.loading}
-                    >
-                      {t('START_NEW_ORDER', 'Start new order')}
-                    </Button>
-                    {completedStatus.includes(parseInt(order?.status, 10)) && (
+                ) &&
+                  (
+                    <ReOrder>
                       <Button
                         color='primary'
                         outline
-                        onClick={() => handleClickReorder(order)}
+                        onClick={() => handleStartNewOrder(order.id)}
                         disabled={reorderState?.loading}
                       >
-                        {reorderState?.loading
-                          ? t('LOADING', 'Loading...')
-                          : t('REORDER', 'Reorder')}
+                        {t('START_NEW_ORDER', 'Start new order')}
                       </Button>
-                    )}
-                  </ReOrder>
-                )}
+                      {completedStatus.includes(parseInt(order?.status, 10)) && (
+                        <Button
+                          color='primary'
+                          outline
+                          onClick={() => handleClickReorder(order)}
+                          disabled={reorderState?.loading}
+                        >
+                          {reorderState?.loading
+                            ? t('LOADING', 'Loading...')
+                            : t('REORDER', 'Reorder')}
+                        </Button>
+                      )}
+                    </ReOrder>
+                  )}
               </TitleContainer>
               {showDeliveryProgress && (
                 <>
@@ -570,6 +521,16 @@ const OrderDetailsUI = (props) => {
                         </p>
                       </PlaceSpotSection>
                     )}
+                    {showOrderActions && (
+                      <DirectionButtonWrapper>
+                        <Button
+                          color='primary'
+                          onClick={() => window.open(`http://maps.google.com/?q=${order?.business?.address}`)}
+                        >
+                          {t('GET_DIRECTIONS', 'Get Directions')}
+                        </Button>
+                      </DirectionButtonWrapper>
+                    )}
                   </BusinessInfo>
                 </BusinessWrapper>
 
@@ -599,7 +560,7 @@ const OrderDetailsUI = (props) => {
                           style={{ fontSize: 14 }}
                           color={order?.status === 20 ? 'secundary' : 'primary'}
                           onClick={() => handleChangeOrderStatus(20)}
-                          disabled={order?.status === 20}
+                          disabled={order?.status === 20 || order?.status === 21}
                         >
                           {getOrderStatus(20)?.value}
                         </Button>
@@ -618,20 +579,24 @@ const OrderDetailsUI = (props) => {
                   </BusinessWrapper>
                 )}
               </BusinessExternalWrapper>
-              {googleMapsApiKey && (
+              {googleMapsApiKey && showBusinessMap && (
                 <MapWrapper>
-                  <OrderMapSection
-                    isMapImg
-                    validStatuses={[order?.status]}
-                    location={order?.business?.location}
-                    mapStyle={{ width: '100%' }}
-                  />
+                  <Map style={{ width: '100%' }}>
+                    <img
+                      src={getGoogleMapImage(order?.business?.location, googleMapsApiKey, mapConfigs)}
+                      id='google-maps-image'
+                      alt='google-maps-location'
+                      width='100%'
+                      height='100%'
+                      loading='lazy'
+                    />
+                  </Map>
                 </MapWrapper>
               )}
             </OrderBusiness>
             <OrderCustomer>
               <BusinessWrapper>
-                {order?.customer?.photo && (
+                {showCustomerPhoto && order?.customer?.photo && (
                   <img src={order?.customer?.photo} />
                 )}
                 <BusinessInfo>
@@ -683,9 +648,24 @@ const OrderDetailsUI = (props) => {
                     </div>
                   </WrapperDriver>
                 </OrderDriver>
-                {!isOriginalLayout && (
-                  <OrderMapSection />
-                )}
+                {
+                  order?.driver?.location &&
+                  validTrackingStatus.includes(parseInt(order?.status)) &&
+                  (
+                    <Map style={{ width: '100%' }}>
+                      <GoogleMapsMap
+                        location={typeof order?.driver?.location?.location === 'string'
+                          ? {
+                            lat: parseFloat(driverLocationString[0]),
+                            lng: parseFloat(driverLocationString[1])
+                          } : driverLocation ?? order?.driver?.location}
+                        locations={parsedLocations}
+                        mapControls={googleMapsControls}
+                        apiKey={configs?.google_maps_api_key?.value}
+                      />
+                    </Map>
+                  )
+                }
               </>
             )}
             {(order?.delivery_type === 1 || order?.comment) && (
@@ -700,8 +680,12 @@ const OrderDetailsUI = (props) => {
           <WrapperRightContainer>
             <OrderProducts>
               <HeaderTitle>
-                <OrderHeaderInfoSection />
-                <OrderActionsSection />
+                <OrderHeaderInfoSection isService={isService} />
+                <OrderActionsSection
+                  userCustomerId={userCustomerId}
+                  isService={isService}
+                  handleGoToPage={handleGoToPage}
+                />
               </HeaderTitle>
               {sortedProductList}
               <OrderBillSection

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

@@ -737,6 +737,9 @@ export const BusinessExternalWrapper = styled.div`
     width: 50%;
   }
 `
+export const DirectionButtonWrapper = styled.div`
+  margin-top: 30px;
+`
 
 export const ProfessionalWrapper = styled.div`
   display: flex;
@@ -786,4 +789,4 @@ export const ProfessionalWrapper = styled.div`
 export const ProfessionalBlock = styled.div`
   border-bottom: 1px solid ${props => props.theme.colors.disabled};
   margin-bottom: 15px;
-`
+`

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

@@ -22,12 +22,14 @@ export const OrderTypeSelectorContentUI = (props) => {
 
   const [, t] = useLanguage()
   const [orderStatus] = useOrder()
-
+  const theme = useTheme()
   const handleClickOrderType = (orderType) => {
     onClose && onClose()
     handleChangeOrderType && handleChangeOrderType(orderType)
   }
 
+  const orderTypeImage = (type) => theme?.header?.components?.order_types?.components?.[type]?.components?.image
+
   return (
     <div className='order-type' style={{ overflow: 'hidden' }}>
       {props.beforeElements?.map((BeforeElement, i) => (
@@ -42,7 +44,7 @@ export const OrderTypeSelectorContentUI = (props) => {
           orderTypes && (configTypes ? orderTypes.filter(type => configTypes?.includes(type.value)) : orderTypes).map((item, i) => (
             <OrderTypeListItemContainer
               key={i}
-              bgimage={item?.image}
+              bgimage={orderTypeImage(item?.text?.replace(' ', '_')?.toLowerCase()) || item?.image}
               onClick={() => handleClickOrderType(item.value)}
               active={orderStatus?.options?.type === item?.value}
             >

package/src/themes/five/src/components/OrdersOption/PreviousBusinessOrdered/index.js

@@ -10,7 +10,7 @@ export const PreviousBusinessOrdered = (props) => {
     isCustomLayout,
     isCustomerMode,
     onRedirectPage,
-    handleUpdateBusinessList,
+    handleUpdateBusinesses,
     businesses
   } = props
 
@@ -45,7 +45,7 @@ export const PreviousBusinessOrdered = (props) => {
                 businessPickupTime={business?.pickup_time}
                 businessDistance={business?.distance}
                 firstCard={i === 0 && width > 681}
-                handleUpdateBusinessList={handleUpdateBusinessList}
+                handleUpdateBusinessList={handleUpdateBusinesses}
               />
             ))
           }

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

@@ -66,7 +66,8 @@ const OrdersOptionUI = (props) => {
     onBusinessClick,
     professionals,
     handleUpdateProfessionals,
-    businesses
+    businesses,
+    handleUpdateBusinesses
   } = props
 
   const [, t] = useLanguage()
@@ -228,6 +229,7 @@ const OrdersOptionUI = (props) => {
           businesses={businesses}
           onRedirectPage={onRedirectPage}
           isLoadingOrders={loading}
+          handleUpdateBusinesses={handleUpdateBusinesses}
         />
       )}
 

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

@@ -29,6 +29,7 @@ import {
   ScheduleInfoWrapper,
   ScheduleInfo
 } from './styles'
+import { useTheme } from 'styled-components'
 
 export const ProductItemAccordion = (props) => {
   const {
@@ -44,6 +45,7 @@ export const ProductItemAccordion = (props) => {
     isStore,
     isConfirmationPage
   } = props
+  const theme = useTheme()
   const [, t] = useLanguage()
   const [orderState] = useOrder()
   const [{ parsePrice, parseDate }] = useUtils()
@@ -119,9 +121,9 @@ export const ProductItemAccordion = (props) => {
           onClick={(e) => toggleAccordion(e)}
         >
           <ProductInfo className='info'>
-            {product?.images && showProductImage && (
+            {(product?.images || theme?.images?.dummies?.product) && showProductImage && (
               <WrapperProductImage>
-                <ProductImage bgimage={product?.images} />
+                <ProductImage bgimage={product?.images || theme?.images?.dummies?.product} />
               </WrapperProductImage>
             )}
             {product?.calendar_event ? (

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

@@ -1,4 +1,4 @@
-import React, { useState } from 'react'
+import React, { useState, useEffect } from 'react'
 import { useTheme } from 'styled-components'
 import { useLanguage, useConfig, useUtils, useOrderingTheme } from 'ordering-components-external'
 import CgSearch from '@meronex/icons/cg/CgSearch'
@@ -125,6 +125,15 @@ export const RenderProductsLayout = (props) => {
     ? ProductListLayoutGroceries
     : BusinessProductsList
 
+  const handleSaveProduct = () => {
+    const productContainer = document.getElementsByClassName('bp-list')[0]
+    scrollTo(productContainer, 500, 1250)
+  }
+
+  useEffect(() => {
+    handleSaveProduct()
+  }, [categorySelected])
+
   return (
     <>
       {!isLoading && business?.id && (

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

@@ -21,8 +21,7 @@ import {
 export const SignUpApproval = (props) => {
   const theme = useTheme()
   const [, t] = useLanguage()
-  const { content: { project, dashboardUrl, dashboardLoginUrl, approvalType, businessType }, onAccept, onCancel } = props
-  const contactEmail = 'support@ordering.co'
+  const { content: { project, dashboardUrl, dashboardLoginUrl, approvalType, businessType, contactEmail }, onAccept, onCancel } = props
   const showDomain = false
 
   const logoImgUrl = businessType === 2
@@ -60,9 +59,9 @@ export const SignUpApproval = (props) => {
               </tr>
               <tr>
                 <td className='bigger td-text-right'>{t('DASHBOARD_WEBPAGE', 'Dashboard webpage')}: </td>
-                <td className='td-text-left'><a className='green-text' href={dashboardLoginUrl} target='_blank' rel='noopener noreferrer'>{dashboardUrl}</a></td>
+                <td className='td-text-left'><a className='green-text' href={t('SIGNUP_DASHBOARD_LOGIN_URL', dashboardLoginUrl)} target='_blank' rel='noopener noreferrer'>{t('SIGNUP_DASHBOARD_URL', dashboardUrl)}</a></td>
               </tr>
-            </tbody> 
+            </tbody>
           </ProjectInfoContainer>
         </BodySection>
       ) : (
@@ -71,13 +70,13 @@ export const SignUpApproval = (props) => {
             <DescriptionContainer>
               <Description><span className='bigger'>{t('YOUR_STORE_UNDER_APPROVAL', 'Your store is under approval')}</span></Description>
               <Description>{t('BUSINESS_SIGNUP_MESSAGE', 'We will contact you as soon as possible')}</Description>
-              <Description>{t('FEEL_FREE_CONTACT_US', 'feel free to contact us at ')} <a className='green-text' href={`mailto:${t('SIGNUP_DRIVER_EMAIL', contactEmail)}`}>{contactEmail}</a></Description>
+              <Description>{t('FEEL_FREE_CONTACT_US', 'feel free to contact us at ')} <a className='green-text' href={`mailto:${t('SIGNUP_DRIVER_EMAIL', contactEmail)}`}>{t('SIGNUP_DRIVER_EMAIL', contactEmail)}</a></Description>
             </DescriptionContainer>
           ) : (
             <DescriptionContainer>
               <Description><span className='bigger'>{t('REQUEST_TO_START_UNDER_APPROVAL', 'Your request to start as a driver is under approval.')}</span></Description>
               <Description>{t('BUSINESS_SIGNUP_MESSAGE', 'We will contact you as soon as possible')}</Description>
-              <Description>{t('FEEL_FREE_CONTACT_US', 'feel free to contact us at ')} <a className='green-text' href={`mailto:${t('SIGNUP_DRIVER_EMAIL', contactEmail)}`}>{contactEmail}</a></Description>
+              <Description>{t('FEEL_FREE_CONTACT_US', 'feel free to contact us at ')} <a className='green-text' href={`mailto:${t('SIGNUP_DRIVER_EMAIL', contactEmail)}`}>{t('SIGNUP_DRIVER_EMAIL', contactEmail)}</a></Description>
             </DescriptionContainer>
           )}
         </BodySection>
@@ -101,7 +100,7 @@ export const SignUpApproval = (props) => {
           </Button>
         </ActionGroup>
         {(approvalType === 'automatic' && userType === 'business') && (
-          <ContactSection>{t('CONTACT_US_QUESTIONS', 'If you have some questions do no hestitate to contact us at ')} <a className='green-text' href={`mailto:${t('SIGNUP_DRIVER_EMAIL', contactEmail)}`}>{contactEmail}</a></ContactSection>
+          <ContactSection>{t('CONTACT_US_QUESTIONS', 'If you have some questions do no hestitate to contact us at ')} <a className='green-text' href={`mailto:${t('SIGNUP_DRIVER_EMAIL', contactEmail)}`}>{t('SIGNUP_DRIVER_EMAIL', contactEmail)}</a></ContactSection>
         )}
       </FooterSection>
     </Container>

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

@@ -157,7 +157,7 @@ const SingleProductCardUI = (props) => {
                     <span>{productAddedToCartLength}</span>
                   </QuantityContainer>
                 )}
-                <CardInfo soldOut={isSoldOut || maxProductQuantity <= 0} isBgimage={optimizeImage(product?.images, 'h_86,c_limit')} oneLine={isPreviously}>
+                <CardInfo soldOut={isSoldOut || maxProductQuantity <= 0} isBgimage={optimizeImage(product?.images || theme?.images?.dummies?.product, 'h_86,c_limit')} oneLine={isPreviously}>
                   <TitleWrapper>
                     {!isSkeleton ? (<h1>{product?.name}</h1>) : (<Skeleton width={100} />)}
                     {!useKioskApp && !isPreviously && (
@@ -182,7 +182,7 @@ const SingleProductCardUI = (props) => {
                   {isPreviously && (!isSkeleton ? (<LastOrder>{t('LAST_ORDERED_ON', 'Last ordered on')} {parseDate(product?.last_ordered_date, { outputFormat: 'MMM DD, YYYY' })}</LastOrder>) : (<Skeleton width={80} />))}
                 </CardInfo>
                 {!isSkeleton ? (
-                  <WrapLogo isBgimage={optimizeImage(product?.images, 'h_86,c_limit')}>
+                  <WrapLogo isBgimage={optimizeImage(product?.images || theme?.images?.dummies?.product, 'h_86,c_limit')}>
                     {product?.ribbon?.enabled && (
                       <RibbonBox
                         bgColor={product?.ribbon?.color}
@@ -195,7 +195,7 @@ const SingleProductCardUI = (props) => {
                     <CardLogo
                       className='image'
                       soldOut={isSoldOut || maxProductQuantity <= 0}
-                      bgimage={optimizeImage(product?.images, 'h_86,c_limit')}
+                      bgimage={optimizeImage(product?.images || theme?.images?.dummies?.product, 'h_86,c_limit')}
                     />
                   </WrapLogo>
                 ) : (

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

@@ -13,9 +13,12 @@ import {
   Divider,
   InputPhoneNumberWrapper,
   LanguageSelectorWrapper,
-  PromotionsWrapper
+  SwitchWrapper,
+  NotificationsGroupSwitchWrapper
 } from './styles'
 
+import { Switch } from '../../../../../styles/Switch'
+
 import { Input } from '../../styles/Inputs'
 import { Button } from '../../styles/Buttons'
 import { InputPhoneNumber } from '../../../../../components/InputPhoneNumber'
@@ -42,7 +45,8 @@ export const UserFormDetailsUI = (props) => {
     setWillVerifyOtpState,
     handleChangePromotions,
     isOldLayout,
-    requiredFields
+    requiredFields,
+    handleChangeNotifications
   } = props
 
   const formMethods = useForm()
@@ -57,13 +61,26 @@ export const UserFormDetailsUI = (props) => {
   const [, { setUserCustomer }] = useCustomer()
   const [isChanged, setIsChanged] = useState(false)
   const emailInput = useRef(null)
-
+  
   const user = userData || userSession
-
+  
+  const [notificationList, setNotificationList] = useState({
+    email: formState?.result?.result
+      ? !!formState?.result?.result?.settings?.email?.newsletter
+      : !!(formState?.changes?.settings?.email?.newsletter ?? (user && user?.settings?.email?.newsletter)),
+    sms: formState?.result?.result
+      ? !!formState?.result?.result?.settings?.sms?.newsletter
+      : !!(formState?.changes?.settings?.sms?.newsletter ?? (user && user?.settings?.sms?.newsletter)),
+    notification: formState?.result?.result
+      ? !!formState?.result?.result?.settings?.notification?.newsletter
+      : !!(formState?.changes?.settings?.notification?.newsletter ?? (user && user?.settings?.notification?.newsletter))
+  })
+  
   const showCustomerCellphone = !orderingTheme?.theme?.profile?.components?.cellphone?.hidden
   const showCustomerPassword = !orderingTheme?.theme?.profile?.components?.password?.hidden
   const showCustomerPromotions = !orderingTheme?.theme?.profile?.components?.promotions?.hidden
   const showLangauges = !orderingTheme?.theme?.profile?.components?.languages?.hidden
+  const showNotifications = !orderingTheme?.theme?.profile?.components?.notification_settings?.hidden
 
   const closeAlert = () => {
     setAlertState({
@@ -251,6 +268,17 @@ export const UserFormDetailsUI = (props) => {
     if (requiredFields && !requiredFields.includes('cellphone')) setIsValidPhoneNumber(true)
   }, [requiredFields])
 
+  const handleEditNotifications = (key, value) => {
+    setNotificationList({
+      ...notificationList,
+      [key]: value
+    })
+  }
+
+  useEffect(()=> {
+    isEdit && handleChangeNotifications(notificationList)
+  },[notificationList])
+
   return (
     <>
       {props.beforeElements?.map((BeforeElement, i) => (
@@ -359,28 +387,36 @@ export const UserFormDetailsUI = (props) => {
                 />
               </InputGroup>
             )}
-            {!isCheckout && showCustomerPromotions && (
-              <PromotionsWrapper>
-                <Checkbox
-                  name='promotions'
-                  id='promotions'
-                  onChange={() => handleChangePromotions(!(formState?.result?.result
-                    ? !!formState?.result?.result?.settings?.notification?.newsletter
-                    : formState?.changes?.settings?.notification?.newsletter ?? (user && user?.settings?.notification?.newsletter)))}
-                  defaultChecked={formState?.result?.result
-                    ? !!formState?.result?.result?.settings?.notification?.newsletter
-                    : !!(formState?.changes?.settings?.notification?.newsletter ?? (user && user?.settings?.notification?.newsletter))}
-                />
-                <label
-                  htmlFor='promotions'
-                >
-                  <span>{t('RECEIVE_NEWS_EXCLUSIVE_PROMOTIONS', 'Receive newsletters and exclusive promotions')}</span>
-                </label>
-              </PromotionsWrapper>
+            {showNotifications && showCustomerPromotions && !requiredFields && (
+              <>
+                <NotificationsGroupSwitchWrapper>
+                  <p>{t('MARKETING_NOTIFICATIONS', 'Marketing Notifications')}</p>
+                  <SwitchWrapper>
+                    <p>{t('EMAILS', 'Emails')}</p>
+                    <Switch
+                      onChange={value => handleEditNotifications('email', value)}
+                      defaultChecked={notificationList?.email}
+                    />
+                  </SwitchWrapper>
+                  <SwitchWrapper>
+                    <p>{t('SMS', 'Sms')}</p>
+                    <Switch
+                      onChange={value => handleEditNotifications('sms', value)}
+                      defaultChecked={notificationList?.sms}
+                    />
+                  </SwitchWrapper>
+                  <SwitchWrapper>
+                    <p>{t('PUSH_NOTIFICATIONS', 'Push Notifications')}</p>
+                    <Switch
+                      onChange={value => handleEditNotifications('notification', value)}
+                      defaultChecked={notificationList?.notification}
+                    />
+                  </SwitchWrapper>
+                </NotificationsGroupSwitchWrapper>
+              </>
             )}
             {showLangauges && !requiredFields && (
               <>
-                <Divider />
                 <LanguageSelectorWrapper>
                   <p>{t('LANGUAGE', 'Language')}</p>
                   <LanguageSelector />

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

@@ -182,3 +182,29 @@ export const PromotionsWrapper = styled.div`
     }
   }
 `
+
+export const NotificationsGroupSwitchWrapper = styled.div`
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+  width: 100%;
+  padding: 15px 0;
+  margin-bottom: 20px;
+  border-bottom: 1px solid #E9ECEF;
+  
+  > p {
+    margin: 0;
+    font-weight: 500;
+    font-size: 20px;
+    color: ${props => props.theme.colors.darkTextColor};
+    width: 100%;
+    text-align: left;
+  }
+`
+
+export const SwitchWrapper = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+`