ordering-ui-admin-external 1.13.4 → 1.14.1

package/src/components/Loyalty/{PointsWallet → Wallet}/styles.js

@@ -6,6 +6,16 @@ export const Container = styled.div`
   box-sizing: border-box;
 `
 
+export const Header = styled.div`
+  display: flex;
+  justify-content: space-between;
+  margin-right: 30px;
+  ${props => props.theme.rtl && css`
+    margin-right: 0;
+    margin-left: 30px;
+  `}
+`
+
 export const Title = styled.h1`
   font-weight: bold;
   font-size: 20px;
@@ -43,3 +53,10 @@ export const Tab = styled.div`
     color: #909BA9;
   `}
 `
+
+export const SkeletonWrapper = styled.div`
+  h1 {
+    margin-top: 0;
+    margin-bottom: 20px;
+  }
+`

package/src/components/Loyalty/index.js

@@ -1,12 +1,12 @@
 import { RewardsPrograms } from './RewardsPrograms'
-import { PointsWallet } from './PointsWallet'
+import { Wallet } from './Wallet'
 import { PointsWalletLevels } from './PointsWalletLevels'
 import { PointsWalletBusinessDetail } from './PointsWalletBusinessDetail'
 import { PointsWalletBusinessList } from './PointsWalletBusinessList'
 
 export {
   RewardsPrograms,
-  PointsWallet,
+  Wallet,
   PointsWalletLevels,
   PointsWalletBusinessDetail,
   PointsWalletBusinessList

package/src/components/Marketing/BannerDetails/styles.js

@@ -11,6 +11,7 @@ export const HeaderContainer = styled.div`
   align-items: center;
   justify-content: space-between;
   margin-bottom: 25px;
+  margin-top: 4px;
 
   ${props => props.theme?.rtl ? css`
     margin-left: 40px;

package/src/components/Marketing/BannerImageDetails/index.js

@@ -215,7 +215,7 @@ const BannerImageDetailsUI = (props) => {
         padding='30px'
         title={t('IMAGE_CROP', 'Image crop')}
         open={cropState?.open}
-        onClose={() => setCropState({ ...cropState, open: false })}
+        onRemove={() => setCropState({ ...cropState, open: false })}
         className='ordering-img-crop'
       >
         <ImageCrop

package/src/components/Marketing/CampaignDetail/index.js

@@ -2,7 +2,7 @@ import React, { useState, useEffect } from 'react'
 import { useTheme } from 'styled-components'
 import { Dropdown, DropdownButton } from 'react-bootstrap'
 import { useLanguage, CampaignDetail as CampaignDetailController } from 'ordering-components-admin-external'
-import { ThreeDots } from 'react-bootstrap-icons'
+import { ArrowsAngleContract, ArrowsAngleExpand, ThreeDots } from 'react-bootstrap-icons'
 import { Confirm, Alert } from '../../Shared'
 import { CampaignDetailGeneral } from '../CampaignDetailGeneral'
 import { CampaignDetailContent } from '../CampaignDetailContent'
@@ -17,6 +17,8 @@ import {
   Tabs,
   Tab
 } from './styles'
+import { IconButton } from '../../../styles'
+import { useWindowSize } from '../../../hooks/useWindowSize'
 
 const CampaignDetailUI = (props) => {
   const {
@@ -28,10 +30,12 @@ const CampaignDetailUI = (props) => {
 
   const theme = useTheme()
   const [, t] = useLanguage()
+  const { width } = useWindowSize()
 
   const [confirm, setConfirm] = useState({ open: false, content: null, handleOnAccept: null })
   const [alertState, setAlertState] = useState({ open: false, content: [] })
   const [selectedOption, setSelectedOption] = useState('general')
+  const [isExpand, setIsExpand] = useState(false)
 
   const closeAlert = () => {
     setAlertState({
@@ -56,6 +60,14 @@ const CampaignDetailUI = (props) => {
     })
   }
 
+  const expandSidebar = () => {
+    const element = document.getElementById('campaignDetail')
+    if (!element) return
+    if (isExpand) element.style.width = '550px'
+    else element.style.width = '100vw'
+    setIsExpand(prev => !prev)
+  }
+
   useEffect(() => {
     if (!formState?.error || formState.loading) return
     setAlertState({
@@ -73,8 +85,16 @@ const CampaignDetailUI = (props) => {
               <CampaignName>{formState?.changes?.name ?? campaignState?.campaign?.name}</CampaignName>
             )}
           </LeftHeader>
-          {!isAddMode && (
-            <RightHeader>
+          <RightHeader>
+            {width > 576 && (
+              <IconButton
+                color='black'
+                onClick={expandSidebar}
+              >
+                {isExpand ? <ArrowsAngleContract /> : <ArrowsAngleExpand />}
+              </IconButton>
+            )}
+            {!isAddMode && (
               <ActionSelectorWrapper>
                 <DropdownButton
                   menuAlign={theme?.rtl ? 'left' : 'right'}
@@ -89,8 +109,8 @@ const CampaignDetailUI = (props) => {
                   </Dropdown.Item>
                 </DropdownButton>
               </ActionSelectorWrapper>
-            </RightHeader>
-          )}
+            )}
+          </RightHeader>
         </DetailsHeader>
         <Tabs>
           {contentOptionList.map(option => (

package/src/components/Marketing/CampaignDetail/styles.js

@@ -35,18 +35,16 @@ export const LeftHeader = styled.div`
 export const RightHeader = styled.div`
   display: flex;
   align-items: center;
-  margin-top: 3px;
   margin-bottom: 24px;
-`
-
-export const ActionSelectorWrapper = styled.div`
   padding-right: 35px;
 
   ${props => props.theme.rtl && css`
     padding-left: 35px;
     padding-right: 0px;
   `}
+`
 
+export const ActionSelectorWrapper = styled.div`
   button {
     background: transparent !important;
     border: none;

package/src/components/Marketing/CampaignList/styles.js

@@ -195,11 +195,7 @@ export const PagesBottomContainer = styled.div`
 export const AddNewPageButton = styled.div`
   cursor: pointer;
   font-size: 14px;
-  color: ${props => props.theme.colors.lightGray};
-
-  &:hover {
-    color: ${props => props.theme.colors.primary};
-  }
+  color: ${props => props.theme.colors.primary};
 `
 
 export const LinkText = styled.span`

package/src/components/Marketing/EnterprisePromotionDetails/index.js

@@ -4,9 +4,9 @@ import {
   EnterprisePromotionDetails as EnterprisePromotionDetailsController
 } from 'ordering-components-admin-external'
 import { Dropdown, DropdownButton } from 'react-bootstrap'
-import { ThreeDots } from 'react-bootstrap-icons'
+import { ArrowsAngleContract, ArrowsAngleExpand, ThreeDots } from 'react-bootstrap-icons'
 import { useTheme } from 'styled-components'
-import { Switch } from '../../../styles'
+import { Switch, IconButton } from '../../../styles'
 import { DragScroll, Alert, Confirm, SelectBusinesses, SelectSites, SelectUsers, SelectLoyaltyLevels } from '../../Shared'
 import { EnterprisePromotionGeneralDetails } from '../EnterprisePromotionGeneralDetails'
 import { EnterprisePromotionRules } from '../EnterprisePromotionRules'
@@ -16,7 +16,8 @@ import {
   Header,
   TabsContainer,
   Tab,
-  WrapperActionSelector
+  WrapperActionSelector,
+  RightHeader
 } from './styles'
 
 const EnterprisePromotionDetailsUI = (props) => {
@@ -51,6 +52,7 @@ const EnterprisePromotionDetailsUI = (props) => {
   const [alertState, setAlertState] = useState({ open: false, content: [], handleOnAccept: null })
   const [selectedOption, setSelectedOption] = useState('general')
   const [confirm, setConfirm] = useState({ open: false, content: null, handleOnAccept: null })
+  const [isExpand, setIsExpand] = useState(false)
 
   const tabOptions = [
     { key: 'general', content: t('GENERAL', 'General') },
@@ -109,6 +111,14 @@ const EnterprisePromotionDetailsUI = (props) => {
     return true
   }
 
+  const expandSidebar = () => {
+    const element = document.getElementById('sideSlider')
+    if (!element) return
+    if (isExpand) element.style.width = '600px'
+    else element.style.width = '100vw'
+    setIsExpand(prev => !prev)
+  }
+
   useEffect(() => {
     if (!actionState?.error || actionState.loading) return
     setAlertState({
@@ -134,21 +144,29 @@ const EnterprisePromotionDetailsUI = (props) => {
               onChange={val => handleChangeItem({ enabled: val })}
             />
           </div>
-          {!isAddMode && (
-            <WrapperActionSelector>
-              <DropdownButton
-                menuAlign={theme?.rtl ? 'left' : 'right'}
-                title={<ThreeDots />}
-                id={theme?.rtl ? 'dropdown-menu-align-left' : 'dropdown-menu-align-right'}
-              >
-                <Dropdown.Item
-                  onClick={() => onClickDeletePromotion()}
+          <RightHeader>
+            <IconButton
+              color='black'
+              onClick={expandSidebar}
+            >
+              {isExpand ? <ArrowsAngleContract /> : <ArrowsAngleExpand />}
+            </IconButton>
+            {!isAddMode && (
+              <WrapperActionSelector>
+                <DropdownButton
+                  menuAlign={theme?.rtl ? 'left' : 'right'}
+                  title={<ThreeDots />}
+                  id={theme?.rtl ? 'dropdown-menu-align-left' : 'dropdown-menu-align-right'}
                 >
-                  {t('DELETE', 'Delete')}
-                </Dropdown.Item>
-              </DropdownButton>
-            </WrapperActionSelector>
-          )}
+                  <Dropdown.Item
+                    onClick={() => onClickDeletePromotion()}
+                  >
+                    {t('DELETE', 'Delete')}
+                  </Dropdown.Item>
+                </DropdownButton>
+              </WrapperActionSelector>
+            )}
+          </RightHeader>
         </Header>
         <TabsContainer>
           <DragScroll>

package/src/components/Marketing/EnterprisePromotionDetails/styles.js

@@ -12,13 +12,12 @@ export const Header = styled.div`
   display: flex;
   align-items: center;
   justify-content: space-between;
-  margin-top: 4px;
   margin-bottom: 15px;
 
   ${props => props.theme?.rtl ? css`
-    margin-left: 40px;
+    margin-left: 35px;
   ` : css`
-    margin-right: 40px;
+    margin-right: 35px;
   `}
 
   > div:first-child {
@@ -109,3 +108,8 @@ export const WrapperActionSelector = styled.div`
     }
   }
 `
+
+export const RightHeader = styled.div`
+  display: flex;
+  align-items: center;
+`

package/src/components/Marketing/EnterprisePromotionGeneralDetails/index.js

@@ -337,7 +337,7 @@ export const EnterprisePromotionGeneralDetails = (props) => {
         padding='30px'
         title={t('IMAGE_CROP', 'Image crop')}
         open={cropState?.open}
-        onClose={() => setCropState({ ...cropState, open: false })}
+        onRemove={() => setCropState({ ...cropState, open: false })}
       >
         <ImageCrop
           photo={cropState?.data}

package/src/components/Marketing/EnterprisePromotionList/styles.js

@@ -214,12 +214,9 @@ export const PromotionListBottom = styled.div`
 `
 export const AddNewButton = styled.div`
   cursor: pointer;
-  color: ${props => props.theme.colors.lightGray};
+  color: ${props => props.theme.colors.primary};
   width: fit-content;
   font-size: 13px;
-  &:hover {
-    color: ${props => props.theme.colors.primary};
-  }
 `
 
 export const WrapperPagination = styled.div`

package/src/components/Marketing/EnterprisePromotionRules/index.js

@@ -271,6 +271,7 @@ export const EnterprisePromotionRules = (props) => {
         <Modal
           width='70%'
           open={isShowConditions}
+          isTopPosition
           onClose={() => {
             setMoveDistance(0)
             setIsShowConditions(false)

package/src/components/Marketing/PageBanner/index.js

@@ -3,7 +3,7 @@ import { useLanguage, AdBannersList as AdBannersListController } from 'ordering-
 import Skeleton from 'react-loading-skeleton'
 import { SideBar, Alert, SearchBar } from '../../Shared'
 import { Button, Switch, IconButton } from '../../../styles'
-import { ChevronRight, InfoCircle } from 'react-bootstrap-icons'
+import { ArrowsAngleContract, ArrowsAngleExpand, ChevronRight, InfoCircle } from 'react-bootstrap-icons'
 import { BannerDetails } from '../BannerDetails'
 import {
   Container,
@@ -16,8 +16,10 @@ import {
   EnableWrapper,
   InfoWrapper,
   InfoContent,
-  SearchBarWrapper
+  SearchBarWrapper,
+  RightHeader
 } from './styles'
+import { useWindowSize } from '../../../hooks/useWindowSize'
 
 const PageBannersUI = (props) => {
   const {
@@ -36,11 +38,14 @@ const PageBannersUI = (props) => {
     isSearhShow
   } = props
   const [, t] = useLanguage()
+  const { width } = useWindowSize()
+
   const [openItemsDetail, setOpenItemsDetail] = useState(false)
   const [selectedBanner, setSelectedBanner] = useState(null)
   const [alertState, setAlertState] = useState({ open: false, content: [], handleOnAccept: null })
   const [searchValue, setSearchValue] = useState('')
   const [bannerMoveDistance, setBannerMoveDistance] = useState(0)
+  const [isExpand, setIsExpand] = useState(false)
 
   const handleOpenBannerItemsDetail = (e, banner) => {
     const isInvalid = e.target.closest('.banner-enabled')
@@ -56,6 +61,13 @@ const PageBannersUI = (props) => {
     setSelectedBanner(null)
   }
 
+  const expandSidebar = () => {
+    const element = document.getElementById('sideSlider')
+    if (isExpand) element.style.width = '500px'
+    else element.style.width = '100vw'
+    setIsExpand(prev => !prev)
+  }
+
   useEffect(() => {
     if (!actionState?.error || actionState.loading) return
     setAlertState({
@@ -69,6 +81,10 @@ const PageBannersUI = (props) => {
     handleCloseDetail()
   }, [defaultPosition])
 
+  useEffect(() => {
+    if (openItemsDetail) setIsExpand(false)
+  }, [openItemsDetail])
+
   return (
     <>
       <Container>
@@ -84,14 +100,16 @@ const PageBannersUI = (props) => {
               <InfoContent>{bannerInfo}</InfoContent>
             </InfoWrapper>
           </div>
-
-          <Button
-            color='lightPrimary'
-            borderRadius='8px'
-            onClick={e => handleOpenBannerItemsDetail(e, {})}
-          >
-            {t('ADD_BANNER', 'Add banner')}
-          </Button>
+          <RightHeader>
+            {width > 576 && !openItemsDetail && (
+              <IconButton
+                color='black'
+                onClick={expandSidebar}
+              >
+                {isExpand ? <ArrowsAngleContract /> : <ArrowsAngleExpand />}
+              </IconButton>
+            )}
+          </RightHeader>
         </HeaderContainer>
 
         {isSearhShow && (

package/src/components/Marketing/PageBanner/styles.js

@@ -15,9 +15,9 @@ export const HeaderContainer = styled.div`
   justify-content: space-between;
 
   ${props => props.theme?.rtl ? css`
-    margin-left: 40px;
+    margin-left: 30px;
   ` : css`
-    margin-right: 40px;
+    margin-right: 30px;
   `}
 
   > div {
@@ -32,11 +32,22 @@ export const HeaderContainer = styled.div`
       flex: 1;
     }
   }
+`
 
+export const RightHeader = styled.div`
   button {
-    height: 44px;
+    margin-right: 5px;
+    ${props => props.theme.rtl && css`
+      margin-right: 0;
+      margin-left: 5px;
+    `}
+    > svg {
+      width: 18px;
+      height: 18px;
+    }
   }
 `
+
 export const BannersHeader = styled.div`
   border-bottom: 1px solid ${props => props.theme.colors.disabled};
   padding-bottom: 9px;
@@ -95,13 +106,9 @@ export const EnableWrapper = styled.div`
 export const AddNewBanner = styled.div`
   width: fit-content;
   cursor: pointer;
-  color: ${props => props.theme.colors.lightGray};
+  color: ${props => props.theme.colors.primary};
   font-size: 14px;
   margin-top: 15px;
-
-  &:hover {
-    color: ${props => props.theme.colors.primary};
-  }
 `
 export const InfoWrapper = styled.div`
   ${props => props.theme?.rtl ? css`

package/src/components/MyProducts/AdvancedSettings/ImageBox.js

@@ -0,0 +1,112 @@
+import React, { useRef, useState } from 'react'
+import { useLanguage, ExamineClick, DragAndDrop } from 'ordering-components-admin-external'
+import { bytesConverter } from '../../../utils'
+import { Image as DumyPhoto } from 'react-bootstrap-icons'
+import { ImageCrop, Modal, Alert } from '../../Shared'
+import {
+  ImageBoxContainer,
+  UploadImageIconContainer,
+  UploadImageIcon,
+  ImgInfoWrapper
+} from './styles'
+
+export const ImageBox = (props) => {
+  const { isBig, title, ratio, photo, path, handleChangePhoto } = props
+
+  const [, t] = useLanguage()
+
+  const imageRef = useRef()
+  const [alertState, setAlertState] = useState({ open: false, content: [] })
+  const [cropState, setCropState] = useState({ name: null, data: null, open: false })
+
+  const handleChangeImage = (croppedImg) => {
+    handleChangePhoto(croppedImg, path)
+    setCropState({ name: null, data: null, open: false })
+  }
+
+  const handleFiles = (files, name) => {
+    if (files.length === 1) {
+      const type = files[0].type.split('/')[0]
+      if (type !== 'image') {
+        setAlertState({
+          open: true,
+          content: [t('ERROR_ONLY_IMAGES', 'Only images can be accepted')]
+        })
+        return
+      }
+
+      if (bytesConverter(files[0]?.size) > 2048) {
+        setAlertState({
+          open: true,
+          content: [t('IMAGE_MAXIMUM_SIZE', 'The maximum image size is 2 megabytes')]
+        })
+        return
+      }
+      const reader = new window.FileReader()
+      reader.readAsDataURL(files[0])
+      reader.onload = () => {
+        setCropState({ name: name, data: reader.result, open: true })
+      }
+      reader.onerror = error => console.log(error)
+    }
+  }
+
+  const closeAlert = () => {
+    setAlertState({
+      open: false,
+      content: []
+    })
+  }
+
+  return (
+    <div>
+      <ImageBoxContainer isBig={isBig} onClick={() => imageRef.current.click()}>
+        <ExamineClick
+          onFiles={files => handleFiles(files, 'logo')}
+          childRef={(e) => { imageRef.current = e }}
+          accept='image/png, image/jpeg, image/jpg'
+        >
+          <DragAndDrop
+            onDrop={dataTransfer => handleFiles(dataTransfer.files, 'logo')}
+            accept='image/png, image/jpeg, image/jpg'
+          >
+            {photo && <img src={photo} alt='logo image' loading='lazy' />}
+            <UploadImageIconContainer bgimage={photo}>
+              <UploadImageIcon>
+                <DumyPhoto />
+                <span>{t('DRAG_AND_DROP', 'Drag and drop')}</span>
+              </UploadImageIcon>
+            </UploadImageIconContainer>
+          </DragAndDrop>
+        </ExamineClick>
+      </ImageBoxContainer>
+      <ImgInfoWrapper>
+        <h4>{title}</h4>
+        <p>{ratio}</p>
+        <p>{t('FORMAT', 'Format')}: PNG</p>
+      </ImgInfoWrapper>
+      <Modal
+        width='700px'
+        height='80vh'
+        padding='30px'
+        title={t('IMAGE_CROP', 'Image crop')}
+        open={cropState?.open}
+        onRemove={() => setCropState({ ...cropState, open: false })}
+      >
+        <ImageCrop
+          photo={cropState?.data}
+          handleChangePhoto={handleChangeImage}
+        />
+      </Modal>
+      <Alert
+        title={t('ORDERING', 'Ordering')}
+        content={alertState.content}
+        acceptText={t('ACCEPT', 'Accept')}
+        open={alertState.open}
+        onClose={() => closeAlert()}
+        onAccept={() => closeAlert()}
+        closeOnBackdrop={false}
+      />
+    </div>
+  )
+}

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

@@ -453,7 +453,7 @@ const OrderingWebsiteUI = (props) => {
         padding='30px'
         title={t('IMAGE_CROP', 'Image crop')}
         open={cropState?.open}
-        onClose={() => setCropState({ ...cropState, open: false })}
+        onRemove={() => setCropState({ ...cropState, open: false })}
       >
         <ImageCrop
           photo={cropState?.data}

package/src/components/OrderingProducts/OrderingProductDetails/index.js

@@ -1,7 +1,7 @@
 import React, { useState } from 'react'
 import { useLanguage, SiteDetails as SiteDetailsController } from 'ordering-components-admin-external'
-import { DefaultSelect } from '../../../styles'
-import { ThreeDots } from 'react-bootstrap-icons'
+import { DefaultSelect, IconButton } from '../../../styles'
+import { ArrowsAngleContract, ArrowsAngleExpand, ThreeDots } from 'react-bootstrap-icons'
 import { Confirm } from '../../Shared'
 import { OrderingProductGeneralDetails } from '../OrderingProductGeneralDetails'
 import { SiteTheme } from '../SiteTheme'
@@ -11,8 +11,10 @@ import {
   Tab,
   DetailHeaderContainer,
   ActionSelectorWrapper,
-  TitleWrapper
+  TitleWrapper,
+  RightHeader
 } from './styles'
+import { useWindowSize } from '../../../hooks/useWindowSize'
 
 const OrderingProductDetailsUI = (props) => {
   const {
@@ -23,7 +25,9 @@ const OrderingProductDetailsUI = (props) => {
 
   const [, t] = useLanguage()
   const [selectedTab, setSelectedTab] = useState('general')
+  const { width } = useWindowSize()
   const [confirm, setConfirm] = useState({ open: false, content: null, handleOnAccept: null })
+  const [isExpand, setIsExpand] = useState(false)
 
   const tabs = [
     { key: 'general', content: t('GENERAL', 'General') },
@@ -45,21 +49,39 @@ const OrderingProductDetailsUI = (props) => {
     })
   }
 
+  const expandSidebar = () => {
+    const element = document.getElementById('product_details')
+    if (!element) return
+    if (isExpand) element.style.width = '500px'
+    else element.style.width = '100vw'
+    setIsExpand(prev => !prev)
+  }
+
   return (
     <Container>
       <DetailHeaderContainer>
         <TitleWrapper>
           <h2>{siteState.site?.name}</h2>
         </TitleWrapper>
-        {!isAddMode && (
-          <ActionSelectorWrapper>
-            <DefaultSelect
-              placeholder={<ThreeDots />}
-              options={moreOptions}
-              onChange={() => onClickDelete()}
-            />
-          </ActionSelectorWrapper>
-        )}
+        <RightHeader>
+          {width > 576 && (
+            <IconButton
+              color='black'
+              onClick={expandSidebar}
+            >
+              {isExpand ? <ArrowsAngleContract /> : <ArrowsAngleExpand />}
+            </IconButton>
+          )}
+          {!isAddMode && (
+            <ActionSelectorWrapper>
+              <DefaultSelect
+                placeholder={<ThreeDots />}
+                options={moreOptions}
+                onChange={() => onClickDelete()}
+              />
+            </ActionSelectorWrapper>
+          )}
+        </RightHeader>
       </DetailHeaderContainer>
       {!isAddMode && (
         <Tabs>