ordering-ui-admin-external 1.15.1 → 1.16.0

package/src/components/Delivery/DriversGroupLogistics/index.js

@@ -23,7 +23,8 @@ export const DriversGroupLogistics = (props) => {
     changesState,
     handleChangesState,
     handleParentSidebarMove,
-    handleUpdateDriversGroup
+    handleUpdateDriversGroup,
+    actionDisabled
   } = props
 
   const history = useHistory()
@@ -74,7 +75,9 @@ export const DriversGroupLogistics = (props) => {
   }, [])
 
   return (
-    <LogisticsContainer>
+    <LogisticsContainer
+      disabled={actionDisabled}
+    >
       <OrderStatusWrapper
         onClick={() => handleChangesState({ orders_group_start_in_status: 7 })}
       >

package/src/components/Delivery/DriversGroupLogistics/styles.js

@@ -3,6 +3,10 @@ import styled, { css } from 'styled-components'
 export const LogisticsContainer = styled.div`
   padding: 20px 0;
   min-height: calc(100% - 120px);
+  ${({ disabled }) => disabled && css`
+    opacity: 0.7;
+    pointer-events: none;
+  `}
 
   > button {
     position: sticky;

package/src/components/Delivery/DriversGroupLogs/index.js

@@ -18,7 +18,8 @@ const DriversGroupLogsUI = (props) => {
   const {
     logsList,
     paginationProps,
-    getDriversGroupLogs
+    getDriversGroupLogs,
+    actionDisabled
   } = props
 
   const [, t] = useLanguage()
@@ -72,7 +73,9 @@ const DriversGroupLogsUI = (props) => {
 
   return (
     <>
-      <DriversGroupLogsContainer>
+      <DriversGroupLogsContainer
+        disabled={actionDisabled}
+      >
         <TableWrapper>
           {(logsList.loading || logsList.logs.length > 0) ? (
             <Table>
@@ -117,7 +120,7 @@ const DriversGroupLogsUI = (props) => {
                   </tbody>
                 ))
               ) : (
-                logsList.logs.map(log => (
+                !logsList.error && logsList.logs?.map(log => (
                   <tbody key={log.id}>
                     <tr>
                       <td>

package/src/components/Delivery/DriversGroupLogs/styles.js

@@ -2,6 +2,10 @@ import styled, { css } from 'styled-components'
 
 export const DriversGroupLogsContainer = styled.div`
   height: calc(100% - 180px);
+  ${({ disabled }) => disabled && css`
+    opacity: 0.7;
+    pointer-events: none;
+  `}
 `
 
 export const TableWrapper = styled.div`

package/src/components/Delivery/DriversGroupPaymethods/index.js

@@ -21,7 +21,8 @@ export const DriversGroupPaymethods = (props) => {
     handleUpdateDriversGroup,
     handleAddDriversGroup,
     handleSelectPaymethod,
-    handleSelectAllPaymethod
+    handleSelectAllPaymethod,
+    actionDisabled
   } = props
   const [, t] = useLanguage()
   const [searchValue, setSearchValue] = useState(null)
@@ -39,7 +40,9 @@ export const DriversGroupPaymethods = (props) => {
 
   return (
     <>
-      <Container>
+      <Container
+        disabled={actionDisabled}
+      >
         <SearchBarWrapper>
           <SearchBar
             placeholder={t('SEARCH', 'Search')}

package/src/components/Delivery/DriversGroupPaymethods/styles.js

@@ -2,6 +2,10 @@ import styled, { css } from 'styled-components'
 
 export const Container = styled.div`
   height: calc(100% - 160px);
+  ${({ disabled }) => disabled && css`
+    opacity: 0.7;
+    pointer-events: none;
+  `}
   > button {
     position: sticky;
     top: 100%;

package/src/components/Delivery/DriversGroupsList/index.js

@@ -34,7 +34,8 @@ export const DriversGroupsList = (props) => {
     selectedGroupList,
     isFromStore,
     handleSelectGroup,
-    handleAllSelectGroup
+    handleAllSelectGroup,
+    actionDisabled
   } = props
 
   const [, t] = useLanguage()
@@ -218,6 +219,7 @@ export const DriversGroupsList = (props) => {
                         <EnableWrapper className='group-enabled'>
                           <span>{t('ENABLE', 'Enable')}</span>
                           <Switch
+                            disabled={actionDisabled}
                             defaultChecked={group?.enabled}
                             onChange={enabled => handleUpdateDriversGroup?.(group.id, { enabled: enabled })}
                           />
@@ -235,6 +237,7 @@ export const DriversGroupsList = (props) => {
             {!isFromStore && (
               <AddNewGroupButton
                 onClick={() => handleOpenDetails(null)}
+                disabled={actionDisabled}
               >
                 {t('ADD_NEW_DRIVER_GROUP', 'Add new driver group')}
               </AddNewGroupButton>

package/src/components/Delivery/DriversGroupsList/styles.js

@@ -222,4 +222,10 @@ export const AddNewGroupButton = styled.div`
   cursor: pointer;
   font-size: 12px;
   color: ${props => props.theme.colors.primary};
+
+  ${({ disabled }) => disabled && css`
+    opacity: 0.5;
+    cursor: not-allowed;
+    pointer-events: none;
+  `}
 `

package/src/components/Delivery/DriversGroupsListing/index.js

@@ -33,7 +33,8 @@ const DriversGroupsListingUI = (props) => {
     actionState,
     handleUpdateDriversGroup,
     handleDeleteDriversGroup,
-    driversCompanyList
+    driversCompanyList,
+    actionDisabled
   } = props
 
   const history = useHistory()
@@ -170,13 +171,14 @@ const DriversGroupsListingUI = (props) => {
               color='lightPrimary'
               data-tour='tour_add_group'
               onClick={() => handleOpenDetails(null)}
+              disabled={actionDisabled}
             >
               {t('ADD_DRIVER_GROUP', 'Add driver group')}
             </Button>
             <Button
               borderRadius='8px'
               color='secundary'
-              disabled={selectedGroupList.length === 0}
+              disabled={selectedGroupList.length === 0 || actionDisabled}
               onClick={() => onClickSelectedGroupsDelete()}
             >
               {t('DELETE', 'Delete')}
@@ -199,6 +201,7 @@ const DriversGroupsListingUI = (props) => {
           selectedGroupList={selectedGroupList}
           handleSelectGroup={handleSelectGroup}
           handleAllSelectGroup={handleAllSelectGroup}
+          actionDisabled={actionDisabled}
         />
       </DriversGroupsListingContainer>
       {openDetails && (
@@ -232,6 +235,7 @@ const DriversGroupsListingUI = (props) => {
             }}
             isTourOpen={isTourOpen}
             handleNextTour={handleNextTour}
+            actionDisabled={actionDisabled}
           />
         </SideBar>
       )}

package/src/components/Delivery/UserAddForm/index.js

@@ -2,6 +2,7 @@ import React, { useState, useEffect, useRef } from 'react'
 import { useForm } from 'react-hook-form'
 import {
   useLanguage,
+  useSession,
   useEvent,
   DragAndDrop,
   ExamineClick,
@@ -14,6 +15,8 @@ import parsePhoneNumber from 'libphonenumber-js'
 import Skeleton from 'react-loading-skeleton'
 import BiImage from '@meronex/icons/bi/BiImage'
 import { useWindowSize } from '../../../hooks/useWindowSize'
+import MdCheckBoxOutlineBlank from '@meronex/icons/md/MdCheckBoxOutlineBlank'
+import MdCheckBox from '@meronex/icons/md/MdCheckBox'
 
 import {
   FormContainer,
@@ -25,7 +28,10 @@ import {
   FormInput,
   ActionsForm,
   SkeletonForm,
-  MainInformationContainer
+  MainInformationContainer,
+  DriverGroupListContainer,
+  DriverGroupItem,
+  CheckboxWrapper
 } from './styles'
 
 const UserAddFormUI = (props) => {
@@ -42,13 +48,16 @@ const UserAddFormUI = (props) => {
     isDriversPage,
     isDriversManagersPage,
     handleChangeSwtich,
-
-    isTourOpen
+    isTourOpen,
+    driversGroupsState,
+    selectedDriverGroupIds,
+    handleDriverGroupClick
   } = props
   const formMethods = useForm()
   const [, t] = useLanguage()
   const [events] = useEvent()
   const { width } = useWindowSize()
+  const [session] = useSession()
 
   const [isValidPhoneNumber, setIsValidPhoneNumber] = useState(null)
   const [userPhoneNumber, setUserPhoneNumber] = useState(null)
@@ -349,6 +358,36 @@ const UserAddFormUI = (props) => {
                 props.afterMidComponents?.map((MidComponent, i) => (
                   <MidComponent key={i} {...props} />))
                 }
+                {isDriversPage && session?.user?.level === 5 && (
+                  <DriverGroupListContainer>
+                    {driversGroupsState.loading ? (
+                      [...Array(10).keys()].map(i => (
+                        <DriverGroupItem key={i}>
+                          <Skeleton width={20} height={20} />
+                          <Skeleton width={100} />
+                        </DriverGroupItem>
+                      ))
+                    ) : (
+                      driversGroupsState.groups.map(group => (
+                        <DriverGroupItem
+                          key={group.id}
+                          onClick={() => handleDriverGroupClick(group.id)}
+                        >
+                          <CheckboxWrapper
+                            active={selectedDriverGroupIds.includes(group.id)}
+                          >
+                            {selectedDriverGroupIds.includes(group.id) ? (
+                              <MdCheckBox />
+                            ) : (
+                              <MdCheckBoxOutlineBlank />
+                            )}
+                          </CheckboxWrapper>
+                          <span>{group?.name}</span>
+                        </DriverGroupItem>
+                      ))
+                    )}
+                  </DriverGroupListContainer>
+                )}
                 <ActionsForm>
                   <Button
                     color='primary'

package/src/components/Delivery/UserAddForm/styles.js

@@ -188,3 +188,37 @@ export const SkeletonForm = styled.div`
 export const MainInformationContainer = styled.div`
   flex: 1;
 `
+
+export const DriverGroupListContainer = styled.div`
+  margin: 15px 0;
+`
+
+export const DriverGroupItem = styled.div`
+  display: flex;
+  align-items: center;
+  border-bottom: 1px solid ${props => props.theme.colors.borderColor};
+  padding: 12px 0;
+  cursor: pointer;
+
+  > span {
+    font-size: 14px;
+    ${props => props.theme?.rtl ? css`
+      margin-right: 15px;
+    ` : css`
+      margin-left: 15px;
+    `}
+  }
+`
+
+export const CheckboxWrapper = styled.div`
+  svg {
+    font-size: 20px;
+    color: ${props => props.theme.colors.lightGray};
+  }
+
+  ${({ active }) => active && css`
+    svg {
+      color: ${props => props.theme.colors.primary};
+    }
+  `}
+`

package/src/components/Delivery/UserDetails/index.js

@@ -36,7 +36,8 @@ export const UserDetailsUI = (props) => {
     handleChangeActiveUser,
     scheduleState,
     handleScheduleState,
-    handleScheduleUpdateUser
+    handleScheduleUpdateUser,
+    actionDisabled
   } = props
 
   const history = useHistory()
@@ -98,6 +99,7 @@ export const UserDetailsUI = (props) => {
             <>
               {handleChangeActiveUser && (
                 <Switch
+                  disabled={actionDisabled}
                   defaultChecked={userState?.user?.enabled || false}
                   onChange={enabled => handleChangeActiveUser({ id: userState?.user?.id, enabled: enabled })}
                 />
@@ -121,13 +123,13 @@ export const UserDetailsUI = (props) => {
                 title={<ThreeDots />}
                 id={theme?.rtl ? 'dropdown-menu-align-left' : 'dropdown-menu-align-right'}
               >
-                <Dropdown.Item onClick={() => setIsCustomField(true)}>
+                <Dropdown.Item onClick={() => setIsCustomField(true)} disabled={actionDisabled}>
                   {t('CUSTOM_FIELDS', 'Custom fields')}
                 </Dropdown.Item>
-                <Dropdown.Item onClick={() => setIsPersonalization(true)}>
+                <Dropdown.Item onClick={() => setIsPersonalization(true)} disabled={actionDisabled}>
                   {t('PERSONALIZATION', 'Personalization')}
                 </Dropdown.Item>
-                <Dropdown.Item onClick={() => handleDeleteUser(userState.user?.id)}>
+                <Dropdown.Item onClick={() => handleDeleteUser(userState.user?.id)} disabled={actionDisabled}>
                   {t('DELETE', 'Delete')}
                 </Dropdown.Item>
               </DropdownButton>

package/src/components/Delivery/UsersList/index.js

@@ -41,7 +41,8 @@ export const UsersList = (props) => {
     handleOpenUserDetails,
     handleOpenUserAddForm,
     isDriversPage,
-    isDriversManagersPage
+    isDriversManagersPage,
+    actionDisabled
   } = props
 
   const [, t] = useLanguage()
@@ -123,7 +124,7 @@ export const UsersList = (props) => {
                 <th>{t('USER', 'User')}</th>
                 <th>{t('DETAILS', 'Details')}</th>
                 <th />
-                <th colspan={2}>{t('ACTION', 'Action')}</th>
+                <th colSpan={2}>{t('ACTION', 'Action')}</th>
               </tr>
             </thead>
             {usersList.loading ? (
@@ -238,6 +239,7 @@ export const UsersList = (props) => {
                       <UserEnableWrapper className='user_enable_control'>
                         <span>{t('ENABLE', 'Enable')}</span>
                         <Switch
+                          disabled={actionDisabled}
                           notAsync={user.level === 0}
                           defaultChecked={user?.enabled}
                           onChange={enabled => handleEnable(user, enabled)}
@@ -251,7 +253,10 @@ export const UsersList = (props) => {
           </UsersTable>
         </UserTableWrapper>
         <UsersBottomContainer>
-          <AddNewUserButton onClick={() => handleOpenUserAddForm()}>
+          <AddNewUserButton
+            onClick={() => handleOpenUserAddForm()}
+            disabled={actionDisabled}
+          >
             {
               isDriversPage
                 ? t('ADD_NEW_DRIVER', 'Add new driver')

package/src/components/Delivery/UsersList/styles.js

@@ -214,6 +214,11 @@ export const AddNewUserButton = styled.div`
   color: ${props => props.theme.colors.primary};
   width: fit-content;
   font-size: 14px;
+
+  ${({ disabled }) => disabled && css`
+    opacity: 0.5;
+    pointer-events: none;
+  `}
 `
 
 export const UsersBottomContainer = styled.div`

package/src/components/Delivery/UsersListingHeader/index.js

@@ -29,7 +29,8 @@ export const UsersListingHeader = (props) => {
     isDriversPage,
     isDriversManagersPage,
 
-    handleOpenTour
+    handleOpenTour,
+    actionDisabled
   } = props
 
   const [, t] = useLanguage()
@@ -72,6 +73,7 @@ export const UsersListingHeader = (props) => {
           color='lightPrimary'
           onClick={() => handleOpenUserAddForm()}
           data-tour='tour_add'
+          disabled={actionDisabled}
         >
           {
             isDriversPage
@@ -86,11 +88,13 @@ export const UsersListingHeader = (props) => {
           disabledActiveStateCondition={disabledActiveStateCondition}
           userTypesSelected={userTypesSelected}
           selectedUserActiveState={selectedUserActiveState}
+          disabled={actionDisabled}
         />
         <UsersDeleteButton
           selectedUsers={selectedUsers}
           deleteUsersActionState={deleteUsersActionState}
           handleDeleteSeveralUsers={handleDeleteSeveralUsers}
+          disabled={actionDisabled}
         />
         <SearchBar
           lazyLoad

package/src/components/MyProducts/OrderingWidgets/index.js

@@ -0,0 +1,118 @@
+import React from 'react'
+import { useLanguage, useApi } from 'ordering-components-admin-external'
+import { useTheme } from 'styled-components'
+import { useInfoShare } from '../../../contexts/InfoShareContext'
+import { IconButton, Input, TextArea } from '../../../styles'
+import { List as MenuIcon } from 'react-bootstrap-icons'
+import {
+  Container,
+  HeaderTitleContainer,
+  Content,
+  PopupContainer,
+  FormGroup,
+  InlineContainer
+} from './styles'
+
+export const OrderingWidgets = () => {
+  const [, t] = useLanguage()
+  const theme = useTheme()
+  const [ordering] = useApi()
+  const [{ isCollapse }, { handleMenuCollapse }] = useInfoShare()
+
+  const url = `https://${ordering.project}.tryordering.com`
+  const color = theme.colors.primary
+  const widgetPopup = '<script type="text/javascript">window.onload=function(){function e(e,t){return!0===e||!1===e?e:t}function t(){return!!(navigator.userAgent.match(/Android/i)||navigator.userAgent.match(/webOS/i)||navigator.userAgent.match(/iPhone/i)||navigator.userAgent.match(/iPad/i)||navigator.userAgent.match(/iPod/i)||navigator.userAgent.match(/BlackBerry/i)||navigator.userAgent.match(/Windows Phone/i))}"undefined"==typeof orderingSettings&&(orderingSettings={});var i=orderingSettings,o=e(i.openOnMobile,!1),n=e(i.openOnDesktop,!1),s=!1,l=document.createElement("div");l.id="ordering_bot",l.style.height=0,l.style.width=0,l.style.position="fixed",l.style.right="20%",l.style.left="20%",l.style.top="7%",l.style.bottom="7%",l.style.borderRadius="5px",l.style.overflow="hidden",l.style.zIndex=99999,l.style.maxheight=window.innerHeight+"px",l.style["-webkit-transition"]="height 0.5s, width 0.5s",l.style["-moz-transition"]="height 0.5s, width 0.5s",l.style["-ms-transition"]="height 0.5s, width 0.5s",l.style["-o-transition"]="height 0.5s, width 0.5s",l.style.transition="height 0.5s, width 0.5s",l.style["-webkit-overflow-scrolling"]="touch",l.style["overflow-y"]="scroll",l.style.boxShadow="0 0 20px 0 #999";var r={insideIframe:!1};document.addEventListener("scroll",function(e){r.insideIframe&&(e.preventDefault(),window.scrollTo(0,0))});var d=document.createElement("div");d.style.height="40px",d.style.background="#ccc",d.style.width="100%",d.style.position="absolute";var a=document.createElement("div");a.style.height="40px",a.style.width="40px",a.style.float="right",a.style.fontSize="28px",a.style.lineHeight="25px",a.style.padding="5px",a.style.textAlign="center",a.style.boxSizing="border-box",a.style.color="#666",a.style.borderLeft="1px solid #bbb",a.style.cursor="pointer",a.innerHTML="&times;",d.appendChild(a);var h=document.createElement("iframe");function y(){s?(l.style.height="auto",l.style.width="auto",window.innerWidth<=480?(l.style.right=0,l.style.left=0,l.style.top=0,l.style.bottom=0,l.style.borderRadius=0):(window.innerWidth>480&&window.innerWidth<600?(l.style.left="10%",l.style.right="10%"):(l.style.left="20%",l.style.right="20%"),l.style.top="7%",l.style.bottom="7%",l.style.borderRadius="5px")):(l.style.height="0px",l.style.width="0px")}h.id="ordering_iframe",h.src="' + url + '",h.style.border=0,h.style.height="100%",h.style.width="100%",h.style.maxWidth="none",h.style.paddingTop="40px",h.style.boxSizing="border-box",h.style["-webkit-overflow-scrolling"]="touch",l.appendChild(d),l.appendChild(h),document.getElementsByTagName("body")[0].appendChild(l),window.toggleOrderingWidget=function(){(s=!s)?(t()&&(r.insideIframe=!0,document.body.style.overflow="hidden",document.body.style.height=window.innerHeight-150+"px"),r.insideIframe=!0,r.scrollX=window.scrollX,r.scrollY=window.scrollY,t()||(document.body.style.overflow="hidden")):(t()&&(r.insideIframe=!1,document.body.style.overflow="auto",document.body.style.height="auto"),r.insideIframe=!1,t()||(document.body.style.overflow="auto")),y()},y(),window.onresize=y,(t()&&o&&!(navigator.userAgent.match(/iPad/i)||(navigator.userAgent.match(/iPhone/i)||void 0))||!t()&&n)&&toggleOrderingWidget(),a.addEventListener("click",toggleOrderingWidget)};</script>'
+  const widgetBot = '<script type="text/javascript">window.onload=function(){function e(e,t){return e===!0||e===!1||void 0!=e||null!=e?e:t}function t(){return navigator.userAgent.match(/Android/i)||navigator.userAgent.match(/webOS/i)||navigator.userAgent.match(/iPhone/i)||navigator.userAgent.match(/iPad/i)||navigator.userAgent.match(/iPod/i)||navigator.userAgent.match(/BlackBerry/i)||navigator.userAgent.match(/Windows Phone/i)?!0:!1}function n(){return navigator.userAgent.match(/iPad/i)?"iPad":navigator.userAgent.match(/iPhone/i)?"iPhone":void 0}function i(){h=!h,h?(t()&&(w.insideIframe=!0,document.body.style.overflow="hidden",document.body.style.height=window.innerHeight-150+"px"),g.innerHTML=p.outerHTML):(t()&&(w.insideIframe=!1,document.body.style.overflow="auto",document.body.style.height="auto"),g.innerHTML=c.outerHTML),o(m)}function o(e){e.style.height=s(),e.style.width=r(),window.innerWidth<=480&&(e.style.top=0,e.style.left=0,e.style.right=0,e.style.bottom=0)}function s(){if(h){if(window.innerWidth<=480)return"100%";var e=window.innerHeight-70-10-20;return (e>570&&y.type=="chat")?"570px":e+"px"}return"0px"}function r(){return h?window.innerWidth<=480?"100%":"chat"==y.type?"370px":window.innerWidth-40+"px":"0px"}function l(){console.log("onresize"),window.innerWidth<=480?(m.style.position="fixed",m.style.bottom=0,m.style.right=0,m.style.borderRadius=0,f.style.display="block"):(m.style.position="fixed",m.style.bottom="80px",m.style.right="20px",m.style.borderRadius="10px",f.style.display="none"),m.style.height=s(),m.style.width=r()}var d="' + url + '";"undefined"==typeof orderingSettings&&(orderingSettings={});var a=orderingSettings,y={openOnMobile:e(a.openOnMobile,!1),openOnDesktop:e(a.openOnDesktop,!1),type:e(a.type,"chat")},h=!1,g=document.createElement("div"),c=document.createElement("img");c.src="https://orderingweb.ordering.co/templates/web/img/icon.png",c.style.width="30px",c.style.marginTop="9px",c.style.maxWidth="none";var p=document.createElement("div");p.innerHTML="&times;",p.style.display="block",p.style.color="#fff",p.style.font="Arial",p.style.fontSize="30px",p.style.margin="0 5px",p.style.borderRadius="50px",p.style.width="40px",p.style.height="40px",p.style.lineHeight="47px",p.style.fontWeight="400",g.style.position="fixed",g.style.bottom="20px",g.style.right="20px",g.style.width="50px",g.style.height="50px",g.style.background="' + color + '",g.style.borderRadius="50px",g.style.textAlign="center",g.style.cursor="pointer",g.style.outline="none",g.style.border=0,g.style.zIndex=99999,g.appendChild(c);var m=document.createElement("div");m.id="ordering_bot",m.style.height=0,m.style.width=0,m.style.position="fixed",m.style.bottom="80px",m.style.right="20px",m.style.borderRadius="10px",m.style.overflow="hidden",m.style.zIndex=99999,m.style.maxheight=window.innerHeight+"px",m.style["-webkit-transition"]="height 0.5s, width 0.5s",m.style["-moz-transition"]="height 0.5s, width 0.5s",m.style["-ms-transition"]="height 0.5s, width 0.5s",m.style["-o-transition"]="height 0.5s, width 0.5s",m.style.transition="height 0.5s, width 0.5s";var u=document.createElement("iframe");u.id="ordering_bot_iframe",u.src=d,u.setAttribute("allow", "geolocation"),u.style.border=0,u.style.height="125%",u.style.width="125%",u.style.maxWidth="none",u.style["-ms-zoom"]="0.8",u.style["-moz-transform"]="scale(0.8)",u.style["-moz-transform-origin"]="0 0",u.style["-o-transform"]="scale(0.8)",u.style["-o-transform-origin"]="0 0",u.style["-webkit-transform"]="scale(0.8)",u.style["-webkit-transform-origin"]="0 0";var w={insideIframe:!1};m.addEventListener("mouseenter",function(){w.insideIframe=!0,w.scrollX=window.scrollX,w.scrollY=window.scrollY,t()||(document.body.style.overflow="hidden")}),m.addEventListener("mouseleave",function(){w.insideIframe=!1,t()||(document.body.style.overflow="auto")}),document.addEventListener("scroll",function(e){w.insideIframe&&(e.preventDefault(),window.scrollTo(0,0))});var f=document.createElement("div");f.style.position="absolute",f.style.width="35px",f.style.height="35px",f.style.bottom="45px",f.style.left="50%",f.style.lineHeight="36px",f.style.background="transparent",f.style.borderColor="transparent";var x=document.createElement("div");x.innerHTML="&times;",x.style.position="relative",x.style.left="-50%",x.style.zIndex="999",x.style.width="40px",x.style.height="40px",x.style.background="rgba(0,0,0,0.2)",x.style.textAlign="center",x.style.border=0,x.style.borderRadius="35px",x.style.color="#fff",x.style.fontSize="30px",x.style.outline="none",x.style.cursor="pointer",f.appendChild(x),m.appendChild(f),m.appendChild(u),document.getElementsByTagName("body")[0].appendChild(g),document.getElementsByTagName("body")[0].appendChild(m),window.toggleOrderingWidget=i,g.onclick=i,f.onclick=i,l(),window.onresize=l,(t()&&y.openOnMobile&&!n()||!t()&&y.openOnDesktop)&&i(),setInterval(function(){n()&&window.innerHeight<m.clientHeight&&(u.style.height=.7*window.innerHeight+"px"),n()&&window.innerHeight==m.clientHeight&&(m.style.bottom=0,u.style.height="125%")},2e3)};</script>'
+  const widgetInline = '<script type="text/javascript">var orderingInlineSettings = {baseUrl: "/"};</script><script type="text/javascript">window.onload=function(){var i={baseUrl:orderingInlineSettings&&orderingInlineSettings.baseUrl?orderingInlineSettings.baseUrl:"/inline/"},l=location.href.split(i.baseUrl)[0],e=location.href.split(i.baseUrl)[1],a="' + url + '",r=document.createElement("iframe");r.id="ordering_iframe",r.src=(a+"/"+e).replace(/([^:]\\/)\\/+/g,"$1"),r.style.border=0,r.style.height="100%",r.style.width="100%",r.style.maxWidth="none",r.allow="geolocation";var d=document.getElementById("ordering_iframe_inline");d.appendChild(r),r.addEventListener("load",function(){t(),setInterval(function(){var e=JSON.stringify({event:"body",data:{}});r.contentWindow.postMessage(e,a)},100)});function t(){var e=document.documentElement,t=window.innerwidth||e.clientWidth,n=window.innerHeight||e.clientHeight,o=(window.pageXOffset||e.scrollLeft)-(e.clientLeft||0),i=(window.pageYOffset||e.scrollTop)-(e.clientTop||0),l=JSON.stringify({event:"scroll",data:{top:i,left:o,width:t,height:n,offsetTop:s(r).top}});r.contentWindow.postMessage(l,a)}function s(e){for(var t=0,n=0;t+=e.offsetTop||0,n+=e.offsetLeft||0,e=e.offsetParent;);return{top:t,left:n}}window.addEventListener("message",function(e){var t=e.data;if("body"==t.event)d.style.height=t.data.height+"px";else if("scroll"==t.event)t.data.enable?document.getElementsByTagName("body")[0].style.overflowY="auto":document.getElementsByTagName("body")[0].style.overflowY="hidden";else if("url"==t.event){var n=document.createElement("a");n.href=t.data;var o=((l?l+"/":"")+i.baseUrl+"/"+n.pathname).replace(/([^:]\\/)\\/+/g,"$1");window.history.pushState("","",o),"http://localhost/"!=t.data&&window.scrollTo(0,s(r).top)}},!1),window.onscroll=function(e){t()}};</script><div style="height: 1000px;" id="ordering_iframe_inline"></div>'
+
+  return (
+    <Container>
+      <HeaderTitleContainer>
+        {isCollapse && (
+          <IconButton
+            color='black'
+            onClick={() => handleMenuCollapse(false)}
+          >
+            <MenuIcon />
+          </IconButton>
+        )}
+        <h1>{t('ORDERING_WIDGETS', 'Ordering Widgets')}</h1>
+      </HeaderTitleContainer>
+      <Content>
+        <PopupContainer>
+          <h2>{t('INTEGRATION_WEBSITE', 'Integration on your website')}: {t('POPUP', 'Popup')}</h2>
+          <h3>{t('BUTTON_WITH_MODAL_STYLE', 'Button with modal style')}</h3>
+          <FormGroup>
+            <label>1* {t('INSERT_ON_DIV_DISPLAY', 'Insert in the div where you want to display it.')}</label>
+            <Input
+              placeholder={t('CODE', 'Code')}
+              defaultValue={`<button onclick="toggleOrderingWidget()">${t('Online_Ordering', 'Online Ordering')}</button>`}
+              disabled
+            />
+          </FormGroup>
+          <FormGroup>
+            <label>2* {t('INSERT_ON_END_BODY', 'Insert at the end of the body tag')} ({t('IF_USED_PAYPALEXPRESS', 'Use only if Paypal Express is used')})</label>
+            <Input
+              placeholder={t('CODE', 'Code')}
+              defaultValue='<script src="https://www.paypalobjects.com/api/checkout.js"></script>'
+              disabled
+            />
+          </FormGroup>
+          <FormGroup>
+            <label>3* {t('INSERT_ON_END_BODY', 'Insert at the end of the body tag')}</label>
+            <TextArea
+              placeholder={t('CODE', 'Code')}
+              value={widgetPopup}
+              disabled
+            />
+          </FormGroup>
+          <h3>{t('CHAT_STYLE_INTEGRATION', 'Chat style integration')}</h3>
+          <FormGroup>
+            <label>1* {t('INSERT_ON_END_BODY', 'Insert at the end of the body tag')} ({t('IF_USED_PAYPALEXPRESS', 'Use only if Paypal Express is used')})</label>
+            <Input
+              placeholder={t('CODE', 'Code')}
+              defaultValue='<script src="https://www.paypalobjects.com/api/checkout.js"></script>'
+              disabled
+            />
+          </FormGroup>
+          <FormGroup>
+            <label>2* {t('INSERT_ON_END_BODY', 'Insert at the end of the body tag')}</label>
+            <TextArea
+              placeholder={t('CODE', 'Code')}
+              value={widgetBot}
+              disabled
+            />
+          </FormGroup>
+        </PopupContainer>
+        <InlineContainer>
+          <h2>{t('INTEGRATION_WEBSITE', 'Integration on your website')}: {t('INLINE', 'Inline')}</h2>
+          <FormGroup>
+            <label>1* {t('INSERT_ON_END_BODY', 'Insert at the end of the body tag')} ({t('IF_USED_PAYPALEXPRESS', 'Use only if Paypal Express is used')})</label>
+            <Input
+              placeholder={t('CODE', 'Code')}
+              defaultValue='<script src="https://www.paypalobjects.com/api/checkout.js"></script>'
+              disabled
+            />
+          </FormGroup>
+          <FormGroup>
+            <label>2* {t('INSERT_ON_DIV_DISPLAY', 'Insert in the div where you want to display it.')}</label>
+            <TextArea
+              placeholder={t('CODE', 'Code')}
+              defaultValue={widgetInline}
+              disabled
+            />
+          </FormGroup>
+          <FormGroup>
+            <label>3* .htaccess</label>
+            <TextArea
+              placeholder={t('CODE', 'Code')}
+              defaultValue='RewriteEngine On
+              RewriteRule ^inline/(.+)$ /inline/ [NC,L] #where inline is the folder'
+              disabled
+            />
+          </FormGroup>
+        </InlineContainer>
+      </Content>
+    </Container>
+  )
+}

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

@@ -0,0 +1,84 @@
+import styled, { css } from 'styled-components'
+
+export const Container = styled.div`
+  flex: 1;
+  padding: 25px 20px;
+  box-sizing: border-box;
+  transition: all 0.5s;
+  max-height: 100vh;
+  overflow: auto;
+`
+
+export const HeaderTitleContainer = styled.div`
+  display: flex;
+  align-items: center;
+  margin-bottom: 35px;
+
+  > h1 {
+    font-weight: 700;
+    font-size: 20px;
+    color: ${props => props.theme.colors.headingColor};
+    margin: 0px;
+    line-height: 32px;
+  }
+
+  > button {
+    ${props => props.theme?.rtl ? css`
+      margin-left: 8px;
+      margin-right: -8px;
+    ` : css`
+      margin-right: 8px;
+      margin-left: -8px;
+    `}
+
+    svg {
+      width: 25px;
+      height: 25px;
+    }
+  }
+`
+
+export const Content = styled.div``
+
+export const FormGroup = styled.div`
+  margin-bottom: 30px;
+  label {
+    display: block;
+    font-weight: 400;
+    font-size: 14px;
+    line-height: 24px;
+    margin-bottom: 11px;
+  }
+  input, textarea {
+    width: 100%;
+  }
+  textarea {
+    height: 200px;
+  }
+`
+
+export const PopupContainer = styled.div`
+  h2 {
+    font-weight: 600;
+    font-size: 16px;
+    line-height: 24px;
+    margin-top: 0px;
+    margin-bottom: 20px;
+  }
+  h3 {
+    font-weight: 600;
+    font-size: 14px;
+    line-height: 21px;
+    margin-bottom: 25px;
+  }
+`
+
+export const InlineContainer = styled.div`
+  h2 {
+    font-weight: 600;
+    font-size: 16px;
+    line-height: 24px;
+    margin-top: 0px;
+    margin-bottom: 20px;
+  }
+`

package/src/components/MyProducts/index.js

@@ -6,6 +6,7 @@ import { PosApp } from './PosApp'
 import { CallCenterApp } from './CallCenterApp'
 import { KioskApp } from './KioskApp'
 import { CustomProject } from './CustomProject'
+import { OrderingWidgets } from './OrderingWidgets'
 
 export {
   OrderingWebsite,
@@ -15,5 +16,6 @@ export {
   PosApp,
   CallCenterApp,
   KioskApp,
-  CustomProject
+  CustomProject,
+  OrderingWidgets
 }