ordering-ui-admin-external 1.6.5 → 1.7.0

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

@@ -0,0 +1,321 @@
+import styled, { css } from 'styled-components'
+
+export const DoordashConnectContainer = styled.div`
+  padding: 26px 20px;
+  box-sizing: border-box;
+  width: 100%;
+  overflow-x: hidden;
+  position: relative;
+
+  @media (min-width: 768px) {
+    padding: 26px 40px;
+  }
+`
+
+export const Header = styled.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 30px;
+
+  ${props => props.theme?.rtl ? css`
+    margin-left: 35px;
+  ` : css`
+    margin-right: 35px;
+  `}
+
+  h1 {
+    font-size: 20px;
+    font-weight: 700;
+    margin: 0px;
+  }
+
+  button {
+    height: 42px;
+  }
+`
+
+export const ApiKeysListTable = styled.table`
+  width: 100%;
+  margin-top: 25px;
+
+  thead {
+    border-bottom: 1px solid ${props => props.theme.colors.secundaryLight};
+    th {
+      padding: 10px 0;
+      &:last-child {
+        padding-left: 20px;
+        padding-right: 20px;
+      }
+    }
+  }
+  tr {
+    width: 100%;
+    th,
+    td {
+      font-size: 12px;
+      word-break: break-all;
+
+      &:last-child {
+        width: 100px;
+        > div {
+          padding-left: 20px;
+          padding-right: 20px;
+        }
+      }
+    }
+  }
+
+  tbody {
+    border-bottom: 1px solid ${props => props.theme.colors.borderColor};
+    td {
+      padding-top: 9px;
+      padding-bottom: 9px;
+
+      &:last-child {
+        > div {
+          display: flex;
+          justify-content: flex-end;
+        }
+      }
+    }
+  }
+`
+
+export const DropdownButtonWrapper = styled.div`
+  ${props => props?.theme?.rtl ? css`
+    border-right: 1px solid ${props => props.theme.colors.borderColor};
+  ` : css`
+    border-left: 1px solid ${props => props.theme.colors.borderColor};
+  `}
+  padding: 5px 20px;
+  button {
+    background: transparent !important;
+    border: none;
+    padding: 0px;
+    &:active,
+    &:focus {
+      border-color: unset !important;
+      box-shadow: none !important;
+    }
+    svg {
+      color: ${props => props.theme.colors.headingColor};
+    }
+
+    &:after {
+      display: none;
+    }
+  }
+
+  .show {
+    button {
+      background: ${props => props.theme.colors.secundary} !important;
+      border-color: unset !important;
+      box-shadow: none !important;
+    }
+    >div {
+      border: 1px solid ${props => props.theme.colors.borderColor};
+      box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.12);
+    }
+  }
+
+  > div {
+    > div {
+      border-radius: 8px;
+      .dropdown-item {
+        font-size: 12px;
+        color: ${props => props.theme.colors.headingColor};
+      }
+      .dropdown-item:last-child {
+        color: #E63757;
+      }
+    }
+  }
+`
+export const AddNewButton = styled.div`
+  cursor: pointer;
+  font-size: 12px;
+  color: ${props => props.theme.colors.lightGray};
+  margin: 20px 0;
+  width: fit-content;
+
+  &:hover {
+    color: ${props => props.theme.colors.primary};
+  }
+`
+
+export const AllSetting = styled.div`
+  user-select: none;
+  cursor: pointer;
+  margin-top: 36px;
+  cursor: pointer;
+  span {
+    font-weight: 600;
+    font-size: 14px;
+    color: ${props => props.theme.colors.primary};
+  }
+  svg {
+    color: ${props => props.theme.colors.primary};
+    margin-left: 5px;
+    transition: 0.2s linear;
+    ${props => props.theme.rtl && css`
+      margin-right: 5px;
+      margin-left: 0px;
+    `}
+  }
+  &:hover {
+    svg {
+      transform: translateX(3px);
+    }
+  }
+`
+
+export const Description = styled.p`
+  margin-top: 40px;
+  font-size: 14px;
+  margin-bottom: 0px;
+  text-align: justify;
+
+  @media (min-width: 768px) {
+    text-align: initial;
+  }
+`
+
+export const CategoryExtraContent = styled.div`
+  position: relative;
+  padding: 26px 26px 60px 26px;
+  box-sizing: border-box;
+  width: 100%;
+  overflow: auto;
+
+  ${props => props.theme?.rtl ? css`
+    border-right: 1px solid #E9ECEF;
+  ` : css`
+    border-left: 1px solid #E9ECEF;
+  `}
+
+  > button {
+    z-index: 100;
+    position: absolute;
+    top: 25px;
+    ${props => props.theme?.rtl ? css`
+      left: 20px;
+    ` : css`
+      right: 20px;
+    `}
+  }
+`
+
+export const Container = styled.div`
+  display: flex;
+  width: 0;
+  position: fixed;
+  box-shadow: -4px 0px 7px #ccc;
+
+  ${({ isDriverOrders }) => isDriverOrders && css`
+    position: absolute;
+    box-shadow: none;
+
+    ${props => props.theme?.rtl ? css`
+      border-right: 1px solid #CCC;
+    ` : css`
+      border-left: 1px solid #CCC;
+    `}
+  `}
+  background: ${props => props.theme.colors?.backgroundPage || '#FFF'};
+  height: calc(var(--vh, 1vh) * 100);
+  top: 0px;
+  z-index: 1001;
+  overflow-x: hidden;
+  transition: 0.3s;
+
+  ${props => props.theme?.rtl ? css`
+    left: 0px;
+    ` : css`
+    right: 0px;
+  `}
+  @media print {
+    box-shadow: none;
+  }
+`
+
+export const DescriptionHeader = styled.div`
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+`
+
+export const HeaderIcons = styled.div`
+  display: flex;
+  position: absolute;
+  top: 25px;
+  right: 20px;
+
+  > button:first-child {
+    ${props => props.theme?.rtl ? css`
+      margin-left: 8px;
+    ` : css`
+      margin-right: 8px;
+    `}
+  }
+`
+
+export const SettingListConatiner = styled.div`
+  width: 100%;
+  margin: 20px 0;
+  border-bottom: 1px solid #E9ECEF;
+`
+
+export const Tab = styled.div`
+  user-select: none;
+  padding: 10px 0px;
+  cursor: pointer;
+  color: ${props => props.theme.colors?.headingColor};
+  font-size: 14px;
+  white-space: nowrap;
+  ${props => props.theme?.rtl ? css`
+    margin-left: 30px;
+  ` : css`
+    margin-right: 30px;
+  `}
+
+  ${({ active }) => active && css`
+    border-bottom: 2px solid;
+    font-weight: 500;
+  `}
+
+  ${({ active }) => !active && css`
+    color: #909BA9;
+  `}
+`
+
+export const Paragraph = styled.div`
+  margin-top: 20px;
+  h2{
+    font-size: 16px;
+  }
+  p{
+    white-space: pre-line;
+    font-size: 12px;
+    margin: 0;
+  }
+  span {
+    font-size: 12px;
+  }
+  a {
+    text-decoration: underline !important;
+    cursor: pointer;
+    font-size: 12px;
+    color: ${props => props.theme.colors.primary} !important;
+  }
+  .bold {
+    font-weight: 600;
+  }
+`
+
+export const PurchaseWrapper = styled.div`
+  button {
+    border-radius: 5px;
+  }
+  margin-top: 15px;
+`

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

@@ -8,6 +8,7 @@ import { SideBar } from '../../Shared'
 import { PluginList } from '../PluginList'
 import { WebhookList } from '../WebhookList'
 import { ApiKeysList } from '../ApiKeysList'
+import { DoordashConnect } from '../DoordashConnect'
 
 import {
   IntegrationsContainer,
@@ -17,11 +18,13 @@ import {
   IconWrapper,
   SettingItemContent
 } from './styles'
+import { useTheme } from 'styled-components'
 
 export const IntegrationListing = (props) => {
   const [, t] = useLanguage()
   const { search } = useLocation()
   const [events] = useEvent()
+  const theme = useTheme()
   const [{ isCollapse }, { handleMenuCollapse }] = useInfoShare()
   const [showOption, setShowOption] = useState(null)
 
@@ -112,6 +115,17 @@ export const IntegrationListing = (props) => {
               <p>{t('APIKEYS_DESCRIPTION', 'These keys serve to obtain a direct connection to the API without the need for authentication.')}</p>
             </SettingItemContent>
           </SettingItemContainer>
+          <SettingItemContainer
+            onClick={() => handleOpenSetting('doordash')}
+          >
+            <IconWrapper>
+              <img src={theme.images.general.doordash} />
+            </IconWrapper>
+            <SettingItemContent>
+              <h5>{t('CONNECT_WITH_DOORDASH', 'Connect with Doordash')}</h5>
+              <p>{t('CONNECT_DOORDASH_DESCRIPTION', 'Send orders directly to your driver in Doordash and keep customers happy with their deliveries.')}</p>
+            </SettingItemContent>
+          </SettingItemContainer>
         </SettingListContainer>
       </IntegrationsContainer>
 
@@ -147,6 +161,12 @@ export const IntegrationListing = (props) => {
           <ApiKeysList />
         </SideBar>
       )}
+
+      {showOption === 'doordash' && (
+        <DoordashConnect
+          onClose={() => handleCloseSettings()}
+        />
+      )}
     </>
   )
 }

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

@@ -82,6 +82,10 @@ export const IconWrapper = styled.div`
     font-size: 24px;
     color: ${props => props.theme.colors.secundaryLight};
   }
+  img{
+    width: 100%;
+    height: 100%;
+  }
 `
 
 export const SettingItemContent = styled.div`

package/src/components/Shared/Pagination/index.js

@@ -19,7 +19,8 @@ export const Pagination = (props) => {
     handleChangePage,
     defaultPageSize,
     handleChangePageSize,
-    isHidePagecontrol
+    isHidePagecontrol,
+    paginationSize
   } = props
 
   const [, t] = useLanguage()
@@ -131,7 +132,7 @@ export const Pagination = (props) => {
             isSecondIcon
             notAsync
             minWidth='70px'
-            defaultValue={defaultPageSize || 10}
+            defaultValue={defaultPageSize || paginationSize}
             options={pageSizeOptions}
             onChange={size => handleChangePageSize(size)}
           />

package/src/components/Shared/SelectSites/index.js

@@ -12,7 +12,6 @@ import {
 
 export const SelectSites = (props) => {
   const {
-    isAllChecked,
     isAddMode,
     isDisabled,
     selectedSitesIds,
@@ -67,8 +66,8 @@ export const SelectSites = (props) => {
           key={site.id}
         >
           <Checkbox
-            checked={isAllChecked || selectedSitesIds.includes(site.id)}
-            onChange={(e) => handleSelectSite(isAllChecked ? true : e.target.checked, site.id)}
+            checked={selectedSitesIds.includes(site.id)}
+            onChange={(e) => handleSelectSite(e.target.checked, site.id)}
           />
           <span>{site.name}</span>
         </ChannelItem>

package/src/components/Shared/SelectUsers/index.js

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { useEffect, useState } from 'react'
 import { useLanguage, UsersList as UsersListController } from 'ordering-components-admin-external'
 import Skeleton from 'react-loading-skeleton'
 import { Pagination } from '../Pagination'
@@ -18,25 +18,41 @@ const SelectUsersUI = (props) => {
     getUsers,
     searchValue,
     onSearch,
-
     isAddMode,
     isDisabled,
     selectedUserIds,
     handleSelectUser,
     handleAddPromotion,
-    handleUpdateClick
+    handleUpdateClick,
+    handleSelectAllUsers
   } = props
   const [, t] = useLanguage()
+  const [all, setAll] = useState(false)
+  const [paginationSize, setPaginationSize] = useState(10)
 
   const handleChangePage = (page) => {
-    getUsers(page, 10)
+    getUsers(page, paginationSize)
   }
 
   const handleChangePageSize = (pageSize) => {
     const expectedPage = Math.ceil(paginationProps.from / pageSize)
+    setPaginationSize(pageSize)
     getUsers(expectedPage, pageSize)
   }
 
+  useEffect(() => {
+    setAll(!!!selectedUserIds?.length)
+  }, [selectedUserIds])
+
+  const handleAllCheck = (check) => {
+    if (!check) {
+      handleSelectAllUsers()
+      setAll(true)
+    } else {
+      setAll(false)
+    }
+  }
+
   return (
     <UsersContainer>
       <SearchBarWrapper>
@@ -57,27 +73,40 @@ const SelectUsersUI = (props) => {
           </UserItem>
         ))
       ) : (
-        usersList.users.map(user => (
-          <UserItem key={user.id}>
+        <>
+          <UserItem>
             <Checkbox
-              checked={selectedUserIds.includes(user.id)}
-              onChange={(e) => handleSelectUser(e.target.checked, user.id)}
+              checked={all}
+              onChange={() => handleAllCheck(all)}
             />
-            <span className='name'>{user?.name} {user?.lastname}</span>
+            <span className='name'>{t('ALL', 'All')}</span>
           </UserItem>
-        ))
-      )}
-
-      {usersList?.users.length > 0 && (
-        <WrapperPagination>
-          <Pagination
-            currentPage={paginationProps.currentPage}
-            totalPages={paginationProps.totalPages}
-            handleChangePage={handleChangePage}
-            handleChangePageSize={handleChangePageSize}
-          />
-        </WrapperPagination>
+          {(!all || !!searchValue?.length) &&
+            usersList.users.map(user => (
+              <UserItem key={user.id}>
+                <Checkbox
+                  checked={selectedUserIds.includes(user.id)}
+                  onChange={(e) => handleSelectUser(e.target.checked, user.id)}
+                />
+                <span className='name'>{user?.name} {user?.lastname}</span>
+              </UserItem>
+            )
+            )}
+        </>
       )}
+      {(!all || !!searchValue?.length) &&
+        usersList?.users.length > 0 && (
+          <WrapperPagination>
+            <Pagination
+              paginationSize={paginationSize}
+              currentPage={paginationProps.currentPage}
+              totalPages={paginationProps.totalPages}
+              handleChangePage={handleChangePage}
+              handleChangePageSize={handleChangePageSize}
+            />
+          </WrapperPagination>
+        )
+      }
 
       <Button
         borderRadius='8px'

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

@@ -156,6 +156,7 @@ export const BusinessDeliveryZoneInformation = (props) => {
           <FormControl>
             <label>{t('NAME', 'Name')}</label>
             <Input
+              disabled={zone?.businesses[0]?.id !== zone?.pivot.business_id}
               placeholder={t('NAME', 'Name')}
               name='name'
               value={formState.changes?.name ?? zone?.name ?? ''}
@@ -169,6 +170,7 @@ export const BusinessDeliveryZoneInformation = (props) => {
             <label>{t('TYPE', 'Type')}</label>
             <TypeSelectWrapper>
               <Select
+                isDisabled={zone?.businesses[0]?.id !== zone?.pivot.business_id}
                 defaultValue={parseInt(formState.changes?.type || zoneType)}
                 options={typeOptions}
                 onChange={handleChangeType}
@@ -213,13 +215,16 @@ export const BusinessDeliveryZoneInformation = (props) => {
         {zoneType !== 4 && isShowMap && (
           configState?.configs?.google_maps_api_key?.value ? (
             <WrapperMap>
-              <button
-                type='button'
-                onClick={() => setClearState(true)}
-              >
-                {t('CLEAR', 'Clear')}
-              </button>
+              {zone?.businesses[0]?.id === zone?.pivot.business_id &&
+                <button
+                  type='button'
+                  onClick={() => setClearState(true)}
+                >
+                  {t('CLEAR', 'Clear')}
+                </button>
+              }
               <BusinessZoneGoogleMaps
+                disabled={zone?.businesses[0]?.id !== zone?.pivot.business_id}
                 apiKey={configState?.configs?.google_maps_api_key?.value}
                 mapControls={googleMapsControls}
                 location={business?.location}

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

@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from 'react'
-import { BusinessDetails as BusinessDetailsController, useSession } from 'ordering-components-admin-external'
+import { BusinessDetails as BusinessDetailsController, useSession, useLanguage } from 'ordering-components-admin-external'
 import { useWindowSize } from '../../../hooks/useWindowSize'
 import { BusinessSummary } from '../BusinessSummary'
 import { BusinessSupport } from '../BusinessSupport'
@@ -18,7 +18,7 @@ import { BusinessOrderingChannels } from '../BusinessOrderingChannels'
 import { BusinessFrontLayout } from '../BusinessFrontLayout'
 // import { BusinessPublishing } from '../BusinessPublishing'
 
-import { MoreSidebarLayout, Personalization } from '../../Shared'
+import { MoreSidebarLayout, Personalization, Alert } from '../../Shared'
 
 import {
   BarContainer
@@ -42,13 +42,17 @@ export const BusinessDetailsUI = (props) => {
     handleSuccessDeleteBusinessItem,
     handleUpdateBusinessState,
     handleDuplicateBusiness,
-    handleDeleteBusiness
+    handleDeleteBusiness,
+    actionStatus
   } = props
+
+  const [, t] = useLanguage()
   const { width } = useWindowSize()
   const [{ user }] = useSession()
   const [isMenuOpen, setIsMenuOpen] = useState(false)
   const [extraOpen, setExtraOpen] = useState(false)
   const [isExtendExtraOpen, setIsExtendExtraOpen] = useState(false)
+  const [alertState, setAlertState] = useState({ open: false, content: [] })
 
   const isAdmin = user?.level === 0
 
@@ -125,6 +129,14 @@ export const BusinessDetailsUI = (props) => {
     return () => document.removeEventListener('keydown', onCloseSidebar)
   }, [open])
 
+  useEffect(() => {
+    if (!actionStatus?.error) return
+    setAlertState({
+      open: true,
+      content: actionStatus?.error
+    })
+  }, [actionStatus?.error])
+
   return (
     <BarContainer id='business_details_bar'>
       {(!isExtendExtraOpen || width < 1000) && (
@@ -274,6 +286,16 @@ export const BusinessDetailsUI = (props) => {
           )}
         </MoreSidebarLayout>
       )}
+
+      <Alert
+        title={t('WEB_APPNAME', 'Ordering')}
+        content={alertState.content}
+        acceptText={t('ACCEPT', 'Accept')}
+        open={alertState.open}
+        onClose={() => setAlertState({ open: false, content: [] })}
+        onAccept={() => setAlertState({ open: false, content: [] })}
+        closeOnBackdrop={false}
+      />
     </BarContainer>
   )
 }