ordering-ui-admin-external 1.22.5 → 1.23.0

package/src/components/Orders/OrderToPrintTicket/index.js

@@ -0,0 +1,264 @@
+import React, { forwardRef } from 'react'
+import { verifyDecimals } from '../../../utils'
+import { useUtils, useLanguage, useConfig } from 'ordering-components-admin-external';
+import { PrintContainer, PrintTextContainer, ProductComments, ProdcutCommentsContainer, Products, InfoContainer, InsideInfo2, InsideInfo, PrintProductsContainer, PrintProducts } from './styles'
+
+export const OrderToPrintTicket = forwardRef((props, ref) => {
+  const {
+    order,
+    getOrderStatus
+  } = props
+
+  const [, t] = useLanguage()
+  const [{ configs }] = useConfig();
+  const [{ parseDate, parsePrice, parseNumber }] = useUtils()
+
+  const deliveryStatus = {
+    1: t('DELIVERY', 'Delivery'),
+    2: t('PICK_UP', 'Pick up'),
+    3: t('EAT_IN', 'Eat In'),
+    4: t('CURBSIDE', 'Curbside'),
+    5: t('DRIVER_THRU', 'Driver thru'),
+  }
+
+  const getProductPrice = (product) => {
+    let subOptionPrice = 0
+    if (Array.isArray(product.options)) {
+      if (product.options?.length > 0) {
+        for (const option of product.options) {
+          for (const suboption of option.suboptions) {
+            subOptionPrice += suboption.quantity * suboption.price
+          }
+        }
+      }
+    }
+
+    const price = product.quantity * (product.price + subOptionPrice)
+    return parseFloat(price.toFixed(2))
+  }
+
+  const getFormattedSubOptionName = ({ quantity, name, position, price }) => {
+    if (name !== 'No') {
+      const pos = position && position !== 'whole' ? `(${t(position.toUpperCase(), position)})` : '';
+      return pos
+        ? `${quantity} x ${name} ${pos} + ${parsePrice(price)}`
+        : `${quantity} x ${name} + ${parsePrice(price)}`;
+    } else {
+      return 'No';
+    }
+  };
+
+  const getSuboptions = (suboptions) => {
+    const array = []
+    suboptions?.length > 0 &&
+      suboptions?.map((suboption) => {
+        const string = `${getFormattedSubOptionName(suboption)}`
+        array.push(string)
+      })
+
+    return array.join('')
+  }
+
+  const getOptions = (options, productComment = '') => {
+    const array = [];
+
+    options?.length &&
+      options?.map((option) => {
+        const string =
+          `${option.name} ${getSuboptions(option.suboptions)}`;
+
+        array.push(string)
+      })
+      
+      if (productComment) {
+        array.push(`${t('COMMENT', 'Comment')}${productComment}`)
+      }
+
+    return array
+  }
+
+  const percentTip =
+  parseInt(configs?.driver_tip_type?.value, 10) === 2 &&
+  !parseInt(configs?.driver_tip_use_custom?.value, 10) &&
+  verifyDecimals(order?.summary?.driver_tip, parseNumber);
+
+  const customerName = `${order?.customer?.name ?? ''} ${order?.customer?.middle_name ?? ''} ${order?.customer?.lastname ?? ''} ${order?.customer?.second_lastname ?? ''}`?.replace('  ', ' ')?.trim() ?? ''
+
+    return (
+      <PrintContainer ref={ref}>
+        <h1>{t('ORDER_NO', 'Order No.')} {order.id}</h1>
+        <PrintTextContainer>
+          {getOrderStatus(order?.status)?.value}
+          <br />
+          {t('DELIVERY_TYPE', 'Delivery Type')}: {deliveryStatus[order?.delivery_type]}
+          <br />
+          {t('DELIVERY_DATE', 'Delivery Date')}: {order?.delivery_datetime_utc
+            ? parseDate(order?.delivery_datetime_utc)
+            : parseDate(order?.delivery_datetime, { utc: false })
+          }
+          <br />
+          {t('PAYMENT_METHOD')}: {order?.paymethod?.name}
+        </PrintTextContainer>
+
+        <h1>{t('CUSTOMER_DETAILS', 'Customer details')}</h1>
+        <PrintTextContainer>
+          {t('FULL_NAME', 'Full Name')}: {customerName}
+          <br/>
+          {t('EMAIL', 'Email')}: {order?.customer?.email}
+          <br />
+          {t('MOBILE_PHONE', 'Mobile Phone')}: {order?.customer?.cellphone}
+          <br />
+          {!!order?.customer?.phone && (
+            t('MOBILE_PHONE', 'Mobile Phone')`: {order?.customer?.phone}`)}
+          {t('FULL_ADDRESS', 'Full Addres')}: {order?.customer?.address}
+          {!!order?.customer?.internal_number && (
+            `${t('INTERNAL_NUMBER', 'Internal Number')}: ${order?.customer?.internal_number}`)}
+            <br />
+          {!!order?.customer.zipcode && (
+          `${t('ZIPCODE', 'Zipcode')}: ${order?.customer.zipcode}`
+          )}
+        </PrintTextContainer>
+
+        <h1>{t('BUSINESS_DETAILS', 'Business details')}</h1>
+        <PrintTextContainer>
+          {order?.business?.name}
+          <br />
+          {order?.business?.email}
+          <br/>
+          {!!order?.business?.cellphone && (
+            <>
+            {`${t('BUSINESS_PHONE', 'Business cellphone')}: ${order?.business?.cellphone}`}
+              <br/>
+            </>
+          )}
+          {!!order?.business?.phone && (
+            <>
+            {`${t('BUSINESS_PHONE', 'Business Phone')}: ${order?.business?.phone}`}
+              <br/>
+            </>
+          )}
+          {t('ADDRESS', 'Address')}: {order?.business?.address}
+          <br/>
+          {!!order?.business?.address_notes && (
+            <>
+            {`${t('SPECIAL_ADDRESS', 'Special Address')}: ${order?.business?.address_notes}`}
+            <br/>
+          </>
+          )}
+        </PrintTextContainer>
+        <h1>{t('ORDER_DETAILS', 'Order Details')}</h1>
+        <br/>
+        <PrintProductsContainer>
+          {order?.products?.length &&
+            order?.products?.map((product, i) =>
+              <PrintProducts key={i}>
+                <Products>
+                  <InsideInfo>
+                  {`${product?.quantity}x ${product?.name}`}
+                  </InsideInfo>
+                  <InsideInfo2>
+                  {parsePrice(product?.total ?? getProductPrice(product))}
+                  </InsideInfo2>
+                </Products>
+                <ProdcutCommentsContainer>
+                    {getOptions(product?.options, product?.comment)?.map(option => (
+                  <ProductComments>
+                    {option}
+                  </ProductComments>
+                ))}
+                </ProdcutCommentsContainer>
+              </PrintProducts>
+            )}
+          </PrintProductsContainer>
+          <br/>
+        <InfoContainer>
+            <InsideInfo>
+              {t('SUBTOTAL', 'Subtotal')}
+            </InsideInfo>
+            <InsideInfo2>
+              {parsePrice(
+              order?.tax_type === 1
+                ? order?.summary?.subtotal + order?.summary?.tax ?? 0
+                : order?.summary?.subtotal ?? 0,
+              )}
+            </InsideInfo2>
+        </InfoContainer>
+        <InfoContainer>
+            {order?.summary?.discount > 0
+            ? order?.offer_type === 1
+              ? <InsideInfo>
+                      {t('DISCOUNT', 'Discount')} ({verifyDecimals(order?.offer_rate,parsePrice,)}%)
+                    </InsideInfo>
+              : <InsideInfo> {t(
+                'DISCOUNT',
+                'Discount',
+              )}
+                    </InsideInfo>
+            : ''
+          }
+          {order?.summary?.discount > 0
+              ? <InsideInfo2>- {parsePrice(
+                order?.summary?.discount,
+              )}
+                    </InsideInfo2>
+              : ''
+            }
+        </InfoContainer>
+
+      {order?.tax_type !== 1 && (
+        <>
+        <InfoContainer>
+          <InsideInfo>
+          {t('TAX', 'Tax')}
+          {' '}
+          {`(${verifyDecimals(order?.summary?.tax_rate, parseNumber)}%)`}
+          </InsideInfo>
+          <InsideInfo2>
+          {parsePrice(order?.summary?.tax ?? 0)}
+          </InsideInfo2>
+        </InfoContainer>
+        </>
+      )}
+
+        {order?.summary?.delivery_price > 0 && (
+         <InfoContainer>
+          <InsideInfo>
+            {t('DELIVERY_FEE','Delivery Fee',)}
+            </InsideInfo>
+          <InsideInfo2>
+            {parsePrice(order?.summary?.delivery_price)}
+            </InsideInfo2>
+          </InfoContainer>
+        )}
+
+        <InfoContainer>
+          <InsideInfo>
+            {t('DRIVER_TIP', 'Driver tip')}
+            {percentTip ? `(${percentTip}%)` : ''}
+          </InsideInfo>
+          <InsideInfo2>
+            {parsePrice(order?.summary?.driver_tip ?? 0)}
+          </InsideInfo2>
+        </InfoContainer>
+
+        <InfoContainer>
+          <InsideInfo>
+            {t('SERVICE_FEE', 'Service Fee')}
+           ({verifyDecimals(order?.summary?.service_fee, parseNumber)}%)
+          </InsideInfo>
+          <InsideInfo2>
+            {parsePrice(order?.summary?.service_fee ?? 0)}
+          </InsideInfo2>
+        </InfoContainer>
+
+        <InfoContainer>
+          <InsideInfo> 
+            {t('TOTAL', 'Total')}
+          </InsideInfo>
+          <InsideInfo2>
+            {parsePrice(order?.summary?.total ?? 0)}
+          </InsideInfo2>
+        </InfoContainer>
+    </PrintContainer>
+    )
+  });

package/src/components/Orders/OrderToPrintTicket/styles.js

@@ -0,0 +1,68 @@
+import styled from 'styled-components'
+
+export const PrintContainer = styled.div`
+  display: none;
+  font-family: arial !important;
+  color: #000 !important;
+  padding: 80px 50px;
+  max-width: 420px;
+
+  > h1 {
+    font-size: 20px;
+    font-weight: 700;
+    margin: 0;
+  }
+
+  @media print {
+    display: block;
+
+    @page { size: portrait; }
+  }
+`
+
+export const PrintTextContainer = styled.p`
+  font-size: 16px
+`
+export const PrintProductsContainer = styled.div`
+  display: flex;
+  flex-direction:column;
+`
+
+export const PrintProducts = styled.div`
+  display: flex;
+  flexDirection:row;
+  flex-wrap:wrap;
+`
+
+export const Products = styled.div`
+  display:flex;
+  width:100%;
+`
+
+export const ProdcutCommentsContainer = styled.div`
+  font-size: 16px;
+  width:100%;
+`
+
+export const ProductComments = styled.div`
+  margin-left: 10px;
+`
+
+export const InfoContainer = styled.div`
+  display: flex;
+`
+
+export const InsideInfo = styled.div`
+  display:flex;
+  justify-content: flex-start;
+  font-size: 16px;
+  width: 70%
+  font-weight: bold
+`
+
+export const InsideInfo2 = styled.div`
+  display:flex;
+  justify-content: flex-end;
+  font-size: 16px;
+  width: 30%
+`

package/src/components/Orders/OrdersTable/index.js

@@ -70,6 +70,7 @@ export const OrdersTable = (props) => {
     getPageOrders(pageSize, expectedPage)
   }
   const [configState] = useConfig()
+  const isEnabledRowInColor = configState?.configs?.row_in_color_enabled?.value === '1'
 
   const optionsDefault = [
     {
@@ -84,6 +85,10 @@ export const OrdersTable = (props) => {
       value: 'cartGroupId',
       content: t('GROUP_ORDER', 'Group Order')
     },
+    {
+      value: 'driverGroupId',
+      content: t('EXPORT_DRIVER_GROUP_ID', 'Driver Group Id')
+    },
     {
       value: 'dateTime',
       content: t('DATE_TIME', 'Date and time')
@@ -498,6 +503,15 @@ export const OrdersTable = (props) => {
                       </StatusInfo>
                     </td>
                   )}
+                  {allowColumns?.driverGroupId?.visable && (
+                    <td className='statusInfo'>
+                      <StatusInfo>
+                        <div className='info'>
+                          <p className='bold'><Skeleton width={100} /></p>
+                        </div>
+                      </StatusInfo>
+                    </td>
+                  )}
                   {allowColumns?.status?.visable && !isSelectedOrders && (
                     <td className='statusInfo'>
                       <StatusInfo>
@@ -597,7 +611,7 @@ export const OrdersTable = (props) => {
                 className={parseInt(orderDetailId) === order.id ? 'active' : ''}
                 onClick={(e) => handleClickOrder(order, e)}
                 data-tour={i === 0 ? 'tour_start' : ''}
-                data-status={getStatusClassName(getDelayMinutes(order))}
+                data-status={isEnabledRowInColor && getStatusClassName(getDelayMinutes(order))}
               >
                 <tr>
                   {Object.keys(allowColumns).filter(col => allowColumns[col]?.visable)
@@ -679,6 +693,17 @@ export const OrdersTable = (props) => {
                           </td>
                         )
                       }
+                      if (column === 'driverGroupId') {
+                        return (
+                          <td className='orderGroupId' key={`cart_group_id${i}-${index}`}>
+                            <StatusInfo>
+                              {order?.driver_group_id && (
+                                <p className='bold'>{t('No', 'No')}. {order?.driver_group_id}</p>
+                              )}
+                            </StatusInfo>
+                          </td>
+                        )
+                      }
                       if (column === 'business') {
                         return (
                           <td className='businessInfo' key={`businessInfo${i}-${index}`}>
@@ -815,7 +840,7 @@ export const OrdersTable = (props) => {
                         )
                       }
                     })}
-                    <td />
+                  <td />
                 </tr>
               </OrderTbody>
             ))

package/src/components/Settings/DoordashConnect/index.js

@@ -151,7 +151,7 @@ const DoordashConnectUI = (props) => {
               {t('DOORDASH_CONNECT_SUPPORT', 'Are you having trouble connecting this, or are you looking to get it elsewhere besides the USA?')}
             </p>
             <p>
-              <a onClick={() => handleGoToLink(t('DOORDASH_CONNECT_SUPPORT_LINK', 'https://www.ordering.co/ordering-support'))}>{t('CONTACT_US', 'Contact us')}</a>; <span>{t('WE_ARE_HAPPY_TO_HELP', 'we are happy to help.')}</span>
+              <a onClick={() => handleGoToLink(t('DOORDASH_CONNECT_SUPPORT_LINK', 'https://www.ordering.co/contact-ordering'))}>{t('CONTACT_US', 'Contact us')}</a>; <span>{t('WE_ARE_HAPPY_TO_HELP', 'we are happy to help.')}</span>
             </p>
           </Paragraph>
           <Paragraph>
@@ -164,7 +164,7 @@ const DoordashConnectUI = (props) => {
             <Button
               outline
               color='primary'
-              onClick={() => handleGoToLink(t('PURCHASE_INTEGRATION_LINK', 'https://www.ordering.co/ordering-sales'))}
+              onClick={() => handleGoToLink(t('PURCHASE_INTEGRATION_LINK', 'https://www.ordering.co/en-us/contact-ordering'))}
             >
               {t('PURCHASE_INTEGRATION', 'Purchase Integration')}
             </Button>

package/src/components/Settings/LalamoveConnect/index.js

@@ -163,7 +163,7 @@ const LalaMoveConnectUI = (props) => {
             <Button
               outline
               color='primary'
-              onClick={() => handleGoToLink(t('PURCHASE_INTEGRATION_LINK', 'https://www.ordering.co/ordering-sales'))}
+              onClick={() => handleGoToLink(t('PURCHASE_INTEGRATION_LINK', 'https://www.ordering.co/en-us/contact-ordering'))}
             >
               {t('PURCHASE_INTEGRATION', 'Purchase Integration')}
             </Button>

package/src/components/Settings/PickerExpress/index.js

@@ -140,7 +140,7 @@ const PickerExpressUI = (props) => {
             <p>
               {t('PICKER_EXPRESS_CONNECT_ARTICLE', 'To connect with Picker Express, you’ll have to use plugins, put in your Picker Express credentials, connect your Picker Express account, and create a driver company inside this dashboard; follow the next article step by step and get this connected in less than 5 minutes.')}
             </p>
-            <a onClick={() => handleGoToLink(t('PICKER_EXPRESS_CONNECT_ARTICLE_LINK', 'https://support.ordering.co/hc/en-us/articles/10673894748941'))}>
+            <a onClick={() => handleGoToLink(t('PICKER_EXPRESS_CONNECT_ARTICLE_LINK', 'https://support.ordering.co/hc/en-us/articles/13007335725069'))}>
               {t('VIEW_ARTICLE', 'View Article')}
             </a>
           </Paragraph>
@@ -163,7 +163,7 @@ const PickerExpressUI = (props) => {
             <Button
               outline
               color='primary'
-              onClick={() => handleGoToLink(t('PURCHASE_INTEGRATION_LINK', 'https://www.ordering.co/ordering-sales'))}
+              onClick={() => handleGoToLink(t('PURCHASE_INTEGRATION_LINK', 'https://www.ordering.co/en-us/contact-ordering'))}
             >
               {t('PURCHASE_INTEGRATION', 'Purchase Integration')}
             </Button>

package/src/components/Settings/Settings/index.js

@@ -215,7 +215,7 @@ const SettingsUI = (props) => {
               >
                 <SettingItemUI
                   title={t('CARD_FIELDS', 'Card fields')}
-                  description={t('CARD_FIELDS_DESC')}
+                  description={t('CARD_FIELDS_DESC', 'Manage your card fields')}
                   icon={<CreditCard />}
                   active={isOpenSettingDetails === 'card'}
                 />

package/src/components/SidebarMenu/index.js

@@ -206,6 +206,12 @@ const SidebarMenuUI = (props) => {
       title: t('BRANDS', 'Brands'),
       pageName: 'brand',
       url: '/stores/brand'
+    },
+    {
+      id: 4,
+      title: t('DEVICES', 'Devices'),
+      pageName: 'devices',
+      url: '/stores/devices'
     }
   ]
 
@@ -350,12 +356,12 @@ const SidebarMenuUI = (props) => {
       pageName: 'enterprise_promotions',
       url: '/marketing/promotions-enterprise'
     },
-    {
-      id: 2,
-      title: t('CAMPAIGN', 'Campaign'),
-      pageName: 'campaign',
-      url: '/marketing/campaign'
-    },
+    // {
+    //   id: 2,
+    //   title: t('CAMPAIGN', 'Campaign'),
+    //   pageName: 'campaign',
+    //   url: '/marketing/campaign'
+    // },
     {
       id: 3,
       title: t('AD_BANNERS', 'Ad banners'),

package/src/components/Stores/BusinessAdd/BusinessDetails/index.js

@@ -42,7 +42,7 @@ export const BusinessDetails = (props) => {
       <h2>{t('BUSINESS_DETAILS', 'Business details')}</h2>
       <ContentWrapper>
         <FormControl>
-          <label>{t('BUSINESS_NAME', 'Business Name')}<sup>*</sup></label>
+          <label>{t('EXPORT_BUSINESS_NAME', 'Business Name')}<sup>*</sup></label>
           <Input
             name='name'
             placeholder={t('NAME', 'Name')}

package/src/components/Stores/BusinessDeviceDetail/index.js

@@ -0,0 +1,183 @@
+import React, { useState, useEffect } from 'react'
+import { useLanguage, BusinessDeviceDetail as BusinessDeviceDetailController } from 'ordering-components-admin-external'
+import { ThreeDots, ArrowsAngleContract, ArrowsAngleExpand } from 'react-bootstrap-icons'
+import { Button, IconButton, DefaultSelect, Input } from '../../../styles'
+import { Select } from '../../../styles/Select/FirstSelect'
+import { useTheme } from 'styled-components'
+import { Alert } from '../../Shared'
+import {
+  Container,
+  DetailHeder,
+  RightHeader,
+  ActionSelectorWrapper,
+  ActionButtonWrapper,
+  FormControl,
+  SelectWrapper,
+  Option,
+  Logo
+} from './styles'
+import Skeleton from 'react-loading-skeleton'
+
+const BusinessDeviceDetailUI = (props) => {
+  const {
+    selectedDevice,
+    deleteDevice,
+    formState,
+    handleChangeFormState,
+    businessList,
+    updateDevice,
+    addDevice
+  } = props
+
+  const [, t] = useLanguage()
+  const theme = useTheme()
+
+  const [isExpand, setIsExpand] = useState(false)
+  const [businessOptions, setBusinessOptions] = useState(null)
+  const [searchValue, setSearchValue] = useState('')
+  const [alertState, setAlertState] = useState({ open: false, content: [] })
+
+  const moreOptions = [
+    { value: 0, content: t('DELETE', 'Delete') }
+  ]
+
+  const expandSideBar = () => {
+    const element = document.getElementById('deviceDetails')
+    if (!element) return
+    if (isExpand) element.style.width = '500px'
+    else element.style.width = '100vw'
+    setIsExpand(prev => !prev)
+  }
+
+  const closeAlert = () => {
+    setAlertState({
+      open: false,
+      content: []
+    })
+  }
+
+  const handleSubmit = () => {
+    const errors = []
+    if (formState?.changes?.name !== undefined && !formState?.changes?.name) {
+      errors.push(t('VALIDATION_ERROR_REQUIRED', 'Name is required').replace('_attribute_', t('NAME', 'Name')))
+    }
+    if (errors.length > 0) {
+      setAlertState({ open: true, content: errors })
+      return
+    }
+    selectedDevice ? updateDevice(selectedDevice?.id) : addDevice()
+  }
+
+  useEffect(() => {
+    if (businessList?.loading) return
+
+    const options = businessList?.businesses
+      .filter(option => option?.name.toLocaleLowerCase().includes(searchValue.toLocaleLowerCase()))
+      .map(business => ({
+        value: business?.id,
+        content: <Option><Logo src={business?.logo || theme.images?.dummies?.businessLogo} />{business?.name}</Option>
+      }))
+    setBusinessOptions(options)
+  }, [searchValue, businessList])
+
+  useEffect(() => {
+    if (formState?.result?.error) {
+      setAlertState({
+        open: true,
+        content: formState?.result?.result
+      })
+    }
+  }, [formState?.result])
+
+  return (
+    <Container>
+      <DetailHeder>
+        <div>
+          {selectedDevice?.name && <span>{selectedDevice?.name}</span>}
+          {!selectedDevice && (
+            <span>{t('ADD_NEW_DEVICE', 'Add new device')}</span>
+          )}
+        </div>
+        <RightHeader>
+          <IconButton
+            color='black'
+            onClick={expandSideBar}
+          >
+            {isExpand ? <ArrowsAngleContract /> : <ArrowsAngleExpand />}
+          </IconButton>
+          {selectedDevice && (
+            <ActionSelectorWrapper>
+              <DefaultSelect
+                placeholder={<ThreeDots />}
+                options={moreOptions}
+                onChange={() => deleteDevice()}
+              />
+            </ActionSelectorWrapper>
+          )}
+        </RightHeader>
+      </DetailHeder>
+      <FormControl>
+        <label>{t('NAME', 'Name')}</label>
+        <Input
+          value={formState?.changes?.name ?? selectedDevice?.name}
+          onChange={(e) => handleChangeFormState({ name: e.target.value })}
+        />
+      </FormControl>
+      <SelectWrapper>
+        <label>{t('BUSINESS', 'Business')}</label>
+        {businessList?.loading ? (
+          <Skeleton height={44} />
+        ) : (
+          <Select
+            options={businessOptions}
+            className='select'
+            defaultValue={formState?.changes?.business_id ?? selectedDevice?.business_id}
+            placeholder={t('SELECT_OPTION', 'Select an option')}
+            onChange={(value) => handleChangeFormState({ business_id: value })}
+            isShowSearchBar
+            searchBarIsCustomLayout
+            searchBarIsNotLazyLoad
+            searchValue={searchValue}
+            handleChangeSearch={(val) => setSearchValue(val)}
+          />
+        )}
+      </SelectWrapper>
+      {selectedDevice && (
+        <FormControl>
+          <label>{t('DEVICE_CODE', 'Device Code')}</label>
+          <Input
+            value={formState?.changes?.code ?? selectedDevice?.code}
+            onChange={(e) => handleChangeFormState({ code: e.target.value })}
+            disabled
+          />
+        </FormControl>
+      )}
+      <ActionButtonWrapper>
+        <Button
+          color='primary'
+          onClick={handleSubmit}
+        >
+          {t('SAVE', 'Save')}
+        </Button>
+      </ActionButtonWrapper>
+      <Alert
+        title={t('DEVICES', 'Devices')}
+        content={alertState.content}
+        acceptText={t('ACCEPT', 'Accept')}
+        open={alertState.open}
+        onClose={() => closeAlert()}
+        onAccept={() => closeAlert()}
+        closeOnBackdrop={false}
+      />
+    </Container>
+  )
+}
+
+export const BusinessDeviceDetail = (props) => {
+  const businessDeviceDetailProps = {
+    ...props,
+    UIComponent: BusinessDeviceDetailUI,
+    propsToFetch: ['id', 'name', 'logo']
+  }
+  return <BusinessDeviceDetailController {...businessDeviceDetailProps} />
+}