ordering-ui-admin-external 1.23.5 → 1.24.0

package/src/components/MyProducts/UploadAudio/styles.js

@@ -0,0 +1,120 @@
+import styled from 'styled-components'
+
+export const Container = styled.div`
+  > h2 {
+    font-weight: 600;
+    font-size: 24px;
+    line-height: 36px;
+    text-align: center;
+    margin-top: 0;
+    margin-bottom: 8px;
+  }
+  > p {
+    width: 100%;
+    font-weight: 400;
+    font-size: 12px;
+    line-height: 18px;
+    text-align: center;
+    margin: 0 auto;
+  }
+
+  @media (min-width: 768px) {
+    > p {
+      width: 80%;
+    }
+  }
+`
+
+export const FileUploadBox = styled.div`
+  height: 210px;
+  margin-top: 35px;
+  border-radius: 8px;
+  background-color: ${props => props.theme.colors.borderColor};
+  position: relative;
+  overflow: hidden;
+  cursor: -webkit-grab;
+  cursor: grab;
+  img, div {
+    width: 100%;
+    overflow: hidden;
+    height: 100%;
+  }
+  img {
+    object-fit: contain;
+  }
+`
+
+export const UploadIconBox = styled.div`
+  position: absolute;
+  top: 0px;
+  > div {
+    color: ${props => props.theme.colors.secundaryLight};
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+    svg {
+      width: 43px;
+      font-size: 40px;
+    }
+    p {
+      font-weight: 400;
+      font-size: 12px;
+      line-height: 18px;
+      margin-bottom: 0;
+      margin-top: 8px;
+    }
+  }
+`
+
+export const Or = styled.h6`
+  text-align: center;
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 24px;
+  margin: 27px 0;
+`
+
+export const FormControl = styled.div`
+  label {
+    font-weight: 400;
+    font-size: 14px;
+    line-height: 24px;
+    margin-bottom: 13px;
+  }
+  input {
+    width: 100%;
+    border-radius: 8px;
+    height: 44px;
+  }
+`
+
+export const ButtonGroup = styled.div`
+  display: flex;
+  flex-direction: column;
+  padding-top: 30px;
+  > button {
+    width: 100%;
+    margin-top: 15px;
+    height: 44px;
+    border-radius: 8px;
+  }
+
+  @media (min-width: 576px) {
+    justify-content: space-between;
+    flex-direction: row;
+    > button {
+      width: 48%;
+    }
+  }
+`
+
+export const PdfIconBox = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  svg {
+    font-size: 150px;
+    color: ${props => props.theme.colors.danger};
+  }
+`

package/src/components/MyProducts/index.js

@@ -7,6 +7,7 @@ import { CallCenterApp } from './CallCenterApp'
 import { KioskApp } from './KioskApp'
 import { CustomProject } from './CustomProject'
 import { OrderingWidgets } from './OrderingWidgets'
+import { UploadAudio } from './UploadAudio'
 
 export {
   OrderingWebsite,
@@ -17,5 +18,6 @@ export {
   CallCenterApp,
   KioskApp,
   CustomProject,
-  OrderingWidgets
+  OrderingWidgets,
+  UploadAudio
 }

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

@@ -146,6 +146,7 @@ export const DeliveriesLocation = (props) => {
   }, [interActionMapOrder])
 
   const handleMapChange = (data) => {
+    if(!data?.zoom) return
     setMapZoom(data?.zoom)
   }
 

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

@@ -18,6 +18,7 @@ export const OrderBill = (props) => {
     handleOrderRefund
   } = props
 
+  const isGiftCardOrder = order?.products?.[0]?.type === 'gift_card'
   const [, t] = useLanguage()
   const [{ parsePrice, parseNumber }] = useUtils()
   const [{ configs }] = useConfig()
@@ -262,11 +263,13 @@ export const OrderBill = (props) => {
           </tbody>
         </table>
       )}
-      <RefundToWallet
-        order={order}
-        actionStatus={actionStatus}
-        handleOrderRefund={handleOrderRefund}
-      />
+      {!isGiftCardOrder && (
+        <RefundToWallet
+          order={order}
+          actionStatus={actionStatus}
+          handleOrderRefund={handleOrderRefund}
+        />
+      )}
       {order?.payment_events?.filter(item => item.event === 'refund').length > 0 && (
         <table className='payments'>
           <thead>
@@ -352,7 +355,7 @@ export const OrderBill = (props) => {
         </table>
       )}
 
-      {!order?.refund_data && stripePaymethods.includes(order?.paymethod?.gateway) && (
+      {!isGiftCardOrder && !order?.refund_data && stripePaymethods.includes(order?.paymethod?.gateway) && (
         <RefundButtonWrapper>
           <Button
             color='primary'

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

@@ -130,7 +130,11 @@ export const OrderContactInformation = (props) => {
             </PhotoWrapper>
             <InfoContent>
               <div>
-                <p className='name'>{order?.customer?.name} {order?.customer?.middle_name} {order?.customer?.lastname} {order?.customer?.second_lastname}</p>
+                {(order?.customer?.name || order?.customer?.middle_name || order?.customer?.lastname || order?.customer?.second_lastname) ? (
+                  <p className='name'>{order?.customer?.name} {order?.customer?.middle_name} {order?.customer?.lastname} {order?.customer?.second_lastname}</p>
+                ) : (
+                  (!order?.customer?.email || !order?.customer?.phone) && <p className='name'>{t('GUEST_USER', 'Guest user')}</p>
+                )}
                 {order?.customer?.cellphone && (
                   <IconButton
                     onClick={() => window.open(`tel:${order?.customer?.country_phone_code ? '+' + order?.customer?.country_phone_code : ''}${order?.customer?.cellphone}`)}

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

@@ -15,6 +15,7 @@ import { NotFoundSource, Modal } from '../../Shared'
 import { IconButton } from '../../../styles'
 import { OrderToPrint } from '../OrderToPrint'
 import { OrderToPrintTicket } from '../OrderToPrintTicket'
+import { getOrderStatuPickUp, getOrderStatus } from '../../../utils'
 
 import {
   Container,
@@ -77,37 +78,6 @@ const OrderDetailsUI = (props) => {
   } = props.order
 
   const rejectResonStatuses = [6, 9, 10, 11, 12, 14]
-  const getOrderStatus = (status) => {
-    const orderStatus = [
-      { key: 0, value: 'Pending Order', slug: 'PENDING_ORDER', percentage: 10 },
-      { key: 1, value: 'Completed by admin', slug: 'COMPLETED_BY_ADMIN', percentage: 100 },
-      { key: 2, value: 'Reject by admin', slug: 'REJECT_BY_ADMIN', percentage: 0 },
-      { key: 3, value: 'Driver arrived by business', slug: 'DRIVER_IN_BUSINESS', percentage: 60 },
-      { key: 4, value: 'Preparation Completed', slug: 'PREPARATION_COMPLETED', percentage: 20 },
-      { key: 5, value: 'Reject by business', slug: 'REJECT_BY_BUSINESS', percentage: 0 },
-      { key: 6, value: 'Reject by driver', slug: 'REJECT_BY_DRIVER', percentage: 0 },
-      { key: 7, value: 'Accepted by business', slug: 'ACCEPTED_BY_BUSINESS', percentage: 15 },
-      { key: 8, value: 'Accepted by driver', slug: 'ACCEPTED_BY_DRIVER', percentage: 40 },
-      { key: 9, value: 'Pick up completed by driver', slug: 'PICK_UP_COMPLETED_BY_DRIVER', percentage: 70 },
-      { key: 10, value: 'Pick up Failed by driver', slug: 'PICK_UP_FAILED_BY_DRIVER', percentage: 0 },
-      { key: 11, value: 'Delivery completed by driver', slug: 'DELIVERY_COMPLETED_BY_DRIVER', percentage: 100 },
-      { key: 12, value: 'Delivery Failed by driver', slug: 'DELIVERY_FAILED_BY_DRIVER', percentage: 0 },
-      { key: 13, value: 'Preorder', slug: 'PREORDER', percentage: 0 },
-      { key: 14, value: 'Order not ready', slug: 'ORDER_NOT_READY', percentage: 15 },
-      { key: 15, value: 'Pickup completed by customer', slug: 'PICKUP_COMPLETED_BY_CUSTOMER', percentage: 100 },
-      { key: 16, value: 'Canceled by customer', slug: 'CANCELED_BY_CUSTOMER', percentage: 0 },
-      { key: 17, value: 'Not picked by customer', slug: 'NOT_PICKED_BY_CUSTOMER', percentage: 0 },
-      { key: 18, value: 'Driver almost arrived to business', slug: 'DRIVER_ALMOST_ARRIVED_TO_BUSINESS', percentage: 50 },
-      { key: 19, value: 'Driver almost arrived to customer', slug: 'DRIVER_ALMOST_ARRIVED_TO_CUSTOMER', percentage: 90 },
-      { key: 20, value: 'Customer almost arrived to business', slug: 'CUSTOMER_ALMOST_ARRIVED_TO_BUSINESS', percentage: 90 },
-      { key: 21, value: 'Customer arrived to business', slug: 'CUSTOMER_ARRIVED_TO_BUSINESS', percentage: 90 },
-      { key: 22, value: 'Looking for driver', slug: 'ORDER_LOOKING_FOR_DRIVER', percentage: 30 },
-      { key: 23, value: 'Driver on way', slug: 'ORDER_DRIVER_ON_WAY', percentage: 80 }
-    ]
-
-    const objectStatus = orderStatus.find((o) => o.key === status)
-    return objectStatus && objectStatus
-  }
 
   const getLogisticTag = (status) => {
     switch (parseInt(status)) {
@@ -302,6 +272,8 @@ const OrderDetailsUI = (props) => {
     }
   }, [loading])
 
+  const progressBarObjt = order?.delivery_type && order?.delivery_type === 2 ? getOrderStatuPickUp : getOrderStatus
+
   return (
     <Container
       isSelectedOrders={isSelectedOrders}
@@ -367,10 +339,10 @@ const OrderDetailsUI = (props) => {
               <p>
                 {t('SPOT', 'Spot')}: {order?.place?.name}
               </p>
-            </PlaceSpotContainer>
+            </PlaceSpotContainer> 
           )}
           <StatusBarContainer>
-            <StatusBar percentage={getOrderStatus(order?.status)?.percentage} />
+            <StatusBar percentage={progressBarObjt(order?.status)?.percentage} />
           </StatusBarContainer>
           <AdvancedLogistic>
             <div>
@@ -542,7 +514,7 @@ const OrderDetailsUI = (props) => {
           ref={printRef}
           order={order}
           placeSpotEnabled={placeSpotEnabled}
-          getOrderStatus={getOrderStatus}
+          getOrderStatus={progressBarObjt}
           getLogisticTag={getLogisticTag}
           getPriorityTag={getPriorityTag}
         />
@@ -551,7 +523,7 @@ const OrderDetailsUI = (props) => {
           <OrderToPrintTicket
             ref={printTicketRef}
             order={order}
-            getOrderStatus={getOrderStatus}
+            getOrderStatus={progressBarObjt}
           />
       )}
     </Container>

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

@@ -734,7 +734,9 @@ export const OrdersTable = (props) => {
                                 </OrdersCountWrapper>
                               </WrapperImage>
                               <div className='info'>
-                                <p className='bold'>{order?.customer?.name}</p>
+                                <p className='bold'>
+                                  {(!order?.customer?.email && !order?.customer?.cellphone && !order?.customer?.name) ? t('GUEST_USER', 'Guest user') : order?.customer?.name}
+                                </p>
                                 <p>{order?.customer?.cellphone}</p>
                               </div>
                             </CustomerInfo>

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

@@ -33,6 +33,8 @@ const NotificationSettingUI = (props) => {
     'onesignal_orderingapp_id',
     'onesignal_businessapp_id',
     'onesignal_deliveryapp_id',
+    'onesignal_orderingweb_id',
+    'onesignal_dashboardweb_id',
     'driver_close_distance',
     'notification_toast'
   ]

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

@@ -190,22 +190,22 @@ export const SettingsListUI = (props) => {
                                 <p>{config?.description}</p>
                               )}
                               {
-                                config?.options?.length > 0 && config?.options?.map((item, j) => (
-                                  <FormGroupWrapper key={j}>
-                                    <FormGroupCheck className='checkbox'>
-                                      <label>
-                                        <input
-                                          type='checkbox'
-                                          name={item?.value}
-                                          data-id={config?.id}
-                                          defaultChecked={config?.value.split('|').includes(item?.value)}
-                                          onChange={(e) => handleCheckBoxChange(e, true, config?.value)}
-                                        />
-                                        {t(item.text.toUpperCase())}
-                                      </label>
-                                    </FormGroupCheck>
-                                  </FormGroupWrapper>
-                                ))
+                              config?.options?.length > 0 && config?.options?.map((item, j) => (
+                                <FormGroupWrapper key={j}>
+                                  <FormGroupCheck className='checkbox'>
+                                    <label>
+                                      <input
+                                        type='checkbox'
+                                        name={item?.value}
+                                        data-id={config?.id}
+                                        defaultChecked={config?.value.split('|').includes(item?.value)}
+                                        onChange={(e) => handleCheckBoxChange(e, true, config?.value)}
+                                      />
+                                      {t(item.text.toUpperCase(), item.text.replace(/_/g, ' ').toLowerCase())}
+                                    </label>
+                                  </FormGroupCheck>
+                                </FormGroupWrapper>
+                              ))
                               }
                               {
                                 !config?.options && <OptionsError>{t('NO_OPTIONS_VALUE', 'There is no options value')}</OptionsError>
@@ -236,22 +236,22 @@ export const SettingsListUI = (props) => {
                                   <p>{config?.description}</p>
                                 )}
                                 {
-                                  config?.options?.length > 0 && config?.options?.map((item, j) => (
-                                    <FormGroupWrapper key={j}>
-                                      <FormGroupCheck className='checkbox'>
-                                        <label>
-                                          <input
-                                            type='checkbox'
-                                            name={item?.value}
-                                            data-id={config?.id}
-                                            defaultChecked={JSON.parse(config?.value).includes(parseInt(item?.value))}
-                                            onChange={(e) => handleCheckBoxChange(e, false, config?.value)}
-                                          />
-                                          {item.text}
-                                        </label>
-                                      </FormGroupCheck>
-                                    </FormGroupWrapper>
-                                  ))
+                                config?.options?.length > 0 && config?.options?.map((item, j) => (
+                                  <FormGroupWrapper key={j}>
+                                    <FormGroupCheck className='checkbox'>
+                                      <label>
+                                        <input
+                                          type='checkbox'
+                                          name={item?.value}
+                                          data-id={config?.id}
+                                          defaultChecked={JSON.parse(config?.value).includes(parseInt(item?.value))}
+                                          onChange={(e) => handleCheckBoxChange(e, false, config?.value)}
+                                        />
+                                        {item.text}
+                                      </label>
+                                    </FormGroupCheck>
+                                  </FormGroupWrapper>
+                                ))
                                 }
                                 {!config?.options && <OptionsError>{t('NO_OPTIONS_VALUE', 'There is no options value')}</OptionsError>}
                               </CheckBoxWrapper>
@@ -267,27 +267,27 @@ export const SettingsListUI = (props) => {
                           )
                         }
                         {/* {config.type === 6 && (
-                          <>
-                            <FormGroupText className='form-group'>
-                              <label>{config?.name}</label>
-                              {config?.description && <Description>{config?.description}</Description>}
-                              {config?.value?.split('|')?.filter(value => valuesTypeSix.includes(value?.split(',')[0]))?.map((value, i, hash) => (
-                                <React.Fragment key={`${config?.id} ${value}`}>
-                                  <Description typeSix>{t(value?.split(',')[0], value?.split(',')[0].replace('_', ' '))}</Description>
-                                  <input
-                                    type='text'
-                                    defaultValue={value?.split(',')[1]}
-                                    onChange={(e) => handleChangeTypeSix({
-                                      value: e.target.value,
-                                      type: value?.split(',')[0]
-                                    }, config)}
-                                    className='form-control'
-                                    placeholder={0}
-                                  />
-                                </React.Fragment>
-                              ))}
-                            </FormGroupText>
-                          </>
+                        <>
+                          <FormGroupText className='form-group'>
+                            <label>{config?.name}</label>
+                            {config?.description && <Description>{config?.description}</Description>}
+                            {config?.value?.split('|')?.filter(value => valuesTypeSix.includes(value?.split(',')[0]))?.map((value, i, hash) => (
+                              <React.Fragment key={`${config?.id} ${value}`}>
+                                <Description typeSix>{t(value?.split(',')[0], value?.split(',')[0].replace('_', ' '))}</Description>
+                                <input
+                                  type='text'
+                                  defaultValue={value?.split(',')[1]}
+                                  onChange={(e) => handleChangeTypeSix({
+                                    value: e.target.value,
+                                    type: value?.split(',')[0]
+                                  }, config)}
+                                  className='form-control'
+                                  placeholder={0}
+                                />
+                              </React.Fragment>
+                            ))}
+                          </FormGroupText>
+                        </>
                         )} */}
                       </div>
                     )

package/src/components/Settings/SettingsList/styles.js

@@ -61,6 +61,7 @@ export const FormGroupCheck = styled.div`
     display: flex;
     align-items: center;
     color: ${props => props.theme.colors.headingColor};
+    text-transform: capitalize;
   }
 `
 
@@ -87,7 +88,7 @@ export const CheckBoxWrapper = styled.div`
 
   > label {
     font-weight: 600;
-    margin: 20px 0 0;
+    margin: 0px;
     font-size: 14px;
     color: ${props => props.theme.colors.headingColor};
   }

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

@@ -21,7 +21,7 @@ export const SettingsSelectUI = (props) => {
   const [, t] = useLanguage()
 
   const [options, setOptions] = useState(null)
-  
+
   useEffect(() => {
     if (!config) return
     if (config.key === 'terms_and_conditions') {

package/src/components/SidebarMenu/index.js

@@ -504,6 +504,7 @@ const SidebarMenuUI = (props) => {
                         <MenuContent>
                           {ordersSubMenus.map(item => (
                             !(sessionState?.user?.level === 2 && item.pageName === 'drivers') &&
+                            !((sessionState?.user?.level === 2 || sessionState?.user?.level === 5) && item.pageName === 'giftCards') &&
                             !(sessionState?.user?.level === 5 && item.pageName === 'appointments') && (
                               item.pageName === 'appointments' ? (
                                 isEnabledAppointmentsFeature && (

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

@@ -318,6 +318,7 @@ export const BusinessDetailsUI = (props) => {
             <BusinessSalesChannel
               business={businessState?.business}
               setIsExtendExtraOpen={setIsExtendExtraOpen}
+              siteState={siteState}
             />
           )}
           {selectedItem === 'layout' && (

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

@@ -1,6 +1,6 @@
 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 { ThreeDots, ArrowsAngleContract, ArrowsAngleExpand, PersonFill } from 'react-bootstrap-icons'
 import { Button, IconButton, DefaultSelect, Input } from '../../../styles'
 import { Select } from '../../../styles/Select/FirstSelect'
 import { useTheme } from 'styled-components'
@@ -34,7 +34,9 @@ const BusinessDeviceDetailUI = (props) => {
 
   const [isExpand, setIsExpand] = useState(false)
   const [businessOptions, setBusinessOptions] = useState(null)
-  const [searchValue, setSearchValue] = useState('')
+  const [ownerOptions, setOwnerOptions] = useState(null)
+  const [businessSearchVal, setBusinessSearchVal] = useState('')
+  const [userSearchVal, setUserSearchVal] = useState('')
   const [alertState, setAlertState] = useState({ open: false, content: [] })
 
   const moreOptions = [
@@ -72,13 +74,28 @@ const BusinessDeviceDetailUI = (props) => {
     if (businessList?.loading) return
 
     const options = businessList?.businesses
-      .filter(option => option?.name.toLocaleLowerCase().includes(searchValue.toLocaleLowerCase()))
+      .filter(option => option?.name.toLocaleLowerCase().includes(businessSearchVal.toLocaleLowerCase()))
       .map(business => ({
         value: business?.id,
         content: <Option><Logo src={business?.logo || theme.images?.dummies?.businessLogo} />{business?.name}</Option>
       }))
     setBusinessOptions(options)
-  }, [searchValue, businessList])
+  }, [businessSearchVal, businessList])
+
+  useEffect(() => {
+    if (!businessList?.loading && (formState?.changes?.business_id || selectedDevice?.business_id)) {
+      const owners = businessList?.businesses.find(business => business.id === (formState?.changes?.business_id || selectedDevice?.business_id))?.owners
+      if (owners?.length > 0) {
+        const options = owners
+          .filter(option => option?.name.toLocaleLowerCase().includes(userSearchVal.toLocaleLowerCase()))
+          .map(user => ({
+            value: user?.id,
+            content: <Option>{user?.photo ? <Logo src={user?.photo} /> : <PersonFill />}{user?.name} {user?.lastname}</Option>
+          }))
+        setOwnerOptions(options)
+      }
+    }
+  }, [userSearchVal, selectedDevice, formState?.changes?.business_id, businessList])
 
   useEffect(() => {
     if (formState?.result?.error) {
@@ -137,11 +154,33 @@ const BusinessDeviceDetailUI = (props) => {
             isShowSearchBar
             searchBarIsCustomLayout
             searchBarIsNotLazyLoad
-            searchValue={searchValue}
-            handleChangeSearch={(val) => setSearchValue(val)}
+            searchValue={businessSearchVal}
+            handleChangeSearch={(val) => setBusinessSearchVal(val)}
           />
         )}
       </SelectWrapper>
+      {(formState?.changes?.business_id || selectedDevice?.business_id) && (
+        <SelectWrapper>
+          <label>{t('BUSINESS_OWNER', 'Business owner')}</label>
+          {businessList?.loading ? (
+            <Skeleton height={44} />
+          ) : (
+            <Select
+              options={ownerOptions}
+              className='select'
+              defaultValue={formState?.changes?.user_id ?? selectedDevice?.user_id}
+              placeholder={t('SELECT_OPTION', 'Select an option')}
+              onChange={(value) => handleChangeFormState({ user_id: value })}
+              isShowSearchBar
+              searchBarIsCustomLayout
+              searchBarIsNotLazyLoad
+              searchValue={userSearchVal}
+              handleChangeSearch={(val) => setUserSearchVal(val)}
+            />
+          )}
+        </SelectWrapper>
+      )}
+
       {selectedDevice && (
         <FormControl>
           <label>{t('DEVICE_CODE', 'Device Code')}</label>
@@ -177,7 +216,7 @@ export const BusinessDeviceDetail = (props) => {
   const businessDeviceDetailProps = {
     ...props,
     UIComponent: BusinessDeviceDetailUI,
-    propsToFetch: ['id', 'name', 'logo']
+    propsToFetch: ['id', 'name', 'logo', 'owners']
   }
   return <BusinessDeviceDetailController {...businessDeviceDetailProps} />
 }

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

@@ -114,6 +114,7 @@ export const SelectWrapper = styled.div`
       color: ${props => props.theme.colors.secundaryContrast};
     }
     .list {
+      width: 100%;
       background-color: ${props => props.theme.colors.secundary};
       border: none;
       
@@ -145,6 +146,16 @@ export const Option = styled.div`
   font-size: 14px;
   line-height: 24px;
   color: ${props => props.theme.colors.secundaryContrast};
+  word-break: break-all;
+  svg {
+    min-width: 25px;
+    height: 25px;
+    margin-right: 15px;
+    ${props => props.theme.rtl && css`
+      margin-left: 15px;
+      margin-right: 0;
+    `}
+  }
 `
 
 export const Logo = styled.img`

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

@@ -1,5 +1,5 @@
-import React, { useState } from 'react'
-import { useLanguage } from 'ordering-components-admin-external'
+import React, { useMemo, useState } from 'react'
+import { useLanguage, useApi } from 'ordering-components-admin-external'
 import { useWindowSize } from '../../../hooks/useWindowSize'
 import { useTheme } from 'styled-components'
 import { Button } from '../../../styles'
@@ -17,9 +17,10 @@ import {
 } from './styles'
 
 export const BusinessSalesChannel = (props) => {
-  const { setIsExtendExtraOpen, business } = props
+  const { setIsExtendExtraOpen, business, siteState } = props
 
   const [, t] = useLanguage()
+  const [ordering] = useApi()
   const theme = useTheme()
   const { width } = useWindowSize()
 
@@ -52,6 +53,10 @@ export const BusinessSalesChannel = (props) => {
     setSelectedItem(null)
   }
 
+  const storeUrl = useMemo(() => (siteState?.site?.domain && siteState?.site?.ssl_process_status === 'ended' && siteState?.ssl_status !== 'error'
+    ? `https://${siteState?.site?.domain}/store/${business?.slug}`
+    : `https://${ordering.project}.tryordering.com/store/${business?.slug}`), [siteState, business])
+
   return (
     <Container>
       <SalesContainer>
@@ -94,27 +99,28 @@ export const BusinessSalesChannel = (props) => {
           <>
             {selectedItem?.key === 'facebook' && (
               <BusinessSalesFacebook
-                businessSlug={business.slug}
                 socialItem={selectedItem}
+                storeUrl={storeUrl}
                 onClose={handleCloseDetail}
               />
             )}
             {selectedItem?.key === 'tiktok' && (
               <BusinessSalesTiktok
+                storeUrl={storeUrl}
                 socialItem={selectedItem}
                 onClose={handleCloseDetail}
               />
             )}
             {selectedItem?.key === 'instagram' && (
               <BusinessSalesInstagram
-                businessSlug={business.slug}
+                storeUrl={storeUrl}
                 socialItem={selectedItem}
                 onClose={handleCloseDetail}
               />
             )}
             {selectedItem?.key === 'google_my_business' && (
               <BusinessSalesGoogle
-                businessSlug={business.slug}
+                storeUrl={storeUrl}
                 socialItem={selectedItem}
                 onClose={handleCloseDetail}
               />