ordering-ui-admin-external 1.9.0 → 1.11.0

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

@@ -19,9 +19,7 @@ import {
   ScheduleSection,
   PersonalizationWrapper,
   DetailsHeader,
-  ActionSelectorWrapper,
-  DriverScheduleWraper,
-  DriverSchedule
+  ActionSelectorWrapper
 } from './styles'
 
 export const UserDetailsUI = (props) => {
@@ -43,7 +41,6 @@ export const UserDetailsUI = (props) => {
   const [currentMenuSelected, setCurrentMenuSelected] = useState('profile')
   const [isCustomField, setIsCustomField] = useState(false)
   const [isPersonalization, setIsPersonalization] = useState(false)
-  const [isDriverSchedule, setIsDriverSchedule] = useState(true)
 
   useEffect(() => {
     setExtraOpen(false)
@@ -130,13 +127,6 @@ export const UserDetailsUI = (props) => {
           )}
           {currentMenuSelected === 'schedule' && (
             <ScheduleSection>
-              <DriverScheduleWraper>
-                <DriverSchedule>{t('DRIVER_SCHEDULES', 'Driver schedules')}</DriverSchedule>
-                <Switch
-                  defaultChecked={isDriverSchedule}
-                  onChange={enabled => setIsDriverSchedule(enabled)}
-                />
-              </DriverScheduleWraper>
               <Schedule
                 scheduleList={userState?.user?.schedule}
                 handleChangeScheduleState={handleScheduleState}

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

@@ -142,10 +142,3 @@ export const ScheduleSection = styled.div`
   margin-top: 30px;
   overflow: auto;
 `
-export const DriverScheduleWraper = styled.div`
-  display: flex;
-  align-items: center;
-`
-export const DriverSchedule = styled.span`
-  padding-right: 10px;
-`

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

@@ -267,6 +267,7 @@ export const UsersList = (props) => {
                 totalPages={paginationProps.totalPages}
                 handleChangePage={handleChangePage}
                 handleChangePageSize={handleChangePageSize}
+                defaultPageSize={paginationProps?.pageSize}
               />
             </WrapperPagination>
           )}

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

@@ -222,6 +222,7 @@ export const UsersBottomContainer = styled.div`
   justify-content: space-between;
   align-items: center;
   margin-top: 10px;
+  margin-bottom: 38px;
 `
 
 export const VerifiedItem = styled.span`

package/src/components/Marketing/AdBannersListing/PostionItemUI/index.js

@@ -0,0 +1,53 @@
+import React from 'react'
+import Skeleton from 'react-loading-skeleton'
+import {
+  ItemContainer,
+  TitleContainer,
+  IconWrapper,
+  ItemContent,
+  Title,
+  Description
+} from './styles'
+
+export const PostionItemUI = (props) => {
+  const {
+    isSkeleton,
+    active,
+    icon,
+    title,
+    description
+  } = props
+
+  return (
+    <ItemContainer
+      active={!isSkeleton && active}
+      onClick={() => props.onClick()}
+    >
+      <IconWrapper>
+        {
+          isSkeleton
+            ? <Skeleton width={24} height={24} />
+            : icon
+        }
+      </IconWrapper>
+      <ItemContent>
+        {
+          isSkeleton
+            ? <Skeleton height={20} style={{ width: '80%', marginBottom: '10px' }} />
+            : (
+              <TitleContainer>
+                <Title>{title}</Title>
+              </TitleContainer>
+            )
+        }
+        {
+          isSkeleton
+            ? (<><Skeleton height={15} /><Skeleton height={15} /></>)
+            : (
+              <Description>{description}</Description>
+            )
+        }
+      </ItemContent>
+    </ItemContainer>
+  )
+}

package/src/components/Marketing/AdBannersListing/PostionItemUI/styles.js

@@ -0,0 +1,87 @@
+import styled, { css } from 'styled-components'
+
+export const ItemContainer = styled.div`
+  cursor: pointer;
+  display: flex;
+  flex-direction: row;
+  margin: 15px 0;
+  padding: 20px 10px;
+  transition: all 0.3s;
+  border-radius: 8px;
+  cursor: pointer;
+  border: 1px solid transparent;
+
+  ${({ active }) => active && css`
+    border: 1px solid #2C7BE5 !important;
+  `}
+
+  ${({ disabledFeature }) => disabledFeature && css`
+    background-color: ${props => props.theme?.colors.disabled} !important;
+    cursor: not-allowed;
+  `}
+
+  &:hover {
+    background: #E9F2FE;
+  }
+
+  @media (max-width: 576px) {
+    flex-direction: column;
+  }
+`
+export const IconWrapper = styled.div`
+  width: 64px;
+  height: 64px;
+  min-width: 64px;
+  min-height: 64px;
+  background: #F8F9FA;
+  border-radius: 7.5px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  align-self: center;
+  margin-bottom: 10px;
+  ${props => props.theme?.rtl ? css`
+    margin-left: 15px;
+  ` : css`
+    margin-right: 15px;
+  `}
+
+  @media (min-width: 577px) {
+    align-self: flex-start;
+    margin-bottom: 0;
+  }
+
+  svg {
+    font-size: 24px;
+    color: ${props => props.theme?.colors.secundaryLight};
+  }
+`
+
+export const ItemContent = styled.div`
+  width: 100%;
+`
+
+export const TitleContainer = styled.div`
+  display: flex;
+  align-items: center;
+`
+
+export const Title = styled.p`
+  font-weight: 500;
+  font-size: 13px;
+  color: #344050;
+  margin-bottom: 8px;
+`
+
+export const Description = styled.div`
+  font-weight: normal;
+  font-size: 12px;
+  color: #909BA9;
+
+  @media (min-width: 577px) {
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 2;
+    overflow: hidden;
+  }
+`

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

@@ -0,0 +1,136 @@
+import React, { useState } from 'react'
+import { useLanguage } from 'ordering-components-admin-external'
+import { useInfoShare } from '../../../contexts/InfoShareContext'
+import { IconButton } from '../../../styles'
+import { List as MenuIcon, HouseDoor, ViewStacked, Shop, InfoCircle } from 'react-bootstrap-icons'
+import { PostionItemUI } from './PostionItemUI'
+import { SideBar } from '../../Shared'
+import { PageBanners } from '../PageBanner'
+
+import {
+  AdBannersListingContainer,
+  HeaderContainer,
+  BannerPositionsList,
+  InfoWrapper,
+  InfoContent
+} from './styles'
+
+export const AdBannersListing = (props) => {
+  const [, t] = useLanguage()
+  const [{ isCollapse }, { handleMenuCollapse }] = useInfoShare()
+  const [openPositionDetail, setOpenPositionDetail] = useState(null)
+  const [moveDistance, setMoveDistance] = useState(0)
+
+  const bannerPositions = [
+    {
+      key: 'web_home_page',
+      title: t('WEB_HOME', 'Web home'),
+      description: t('HOME_BANNER_DESCRIPTION', 'Add a banner to your home page and inform everyone about the latest news in your marketplace.'),
+      icon: <HouseDoor />,
+      info: t('RECOMMENDED_IMAGE_SIZE', 'Recommended size _size_').replace('_size_', '1440 x 300'),
+      aspectRatio: 1440 / 300,
+      isSearhShow: false
+    },
+    {
+      key: 'web_business_listing',
+      title: t('WEB_BUSINESS_LISTING', 'Web business listing'),
+      description: t('BUSINESS_LISTING_BANNER_DESCRIPTION', 'Add a banner inside your business listing to let everyone know about your latest promotions inside your businesses listed.'),
+      icon: <ViewStacked />,
+      info: t('RECOMMENDED_IMAGE_SIZE', 'Recommended size _size_').replace('_size_', '1440 x 300'),
+      aspectRatio: 1440 / 300,
+      isSearhShow: false
+    },
+    {
+      key: 'web_business_page',
+      title: t('WEB_BUSINESS_PAGE', 'Web business page'),
+      description: t('BUSINESS_PAGE_BANNER_DESCRIPTION', 'Add a banner inside the business page, and inform news and promotions specifically of the stores customers are ordering from.'),
+      icon: <Shop />,
+      info: t('RECOMMENDED_IMAGE_SIZE', 'Recommended size _size_').replace('_size_', '1440 x 300'),
+      aspectRatio: 1440 / 300,
+      isSearhShow: true
+    },
+    {
+      key: 'app_business_listing',
+      title: t('APP_BUSINESS_LISTING', 'App business listing'),
+      description: t('BUSINESS_LISTING_BANNER_DESCRIPTION', 'Add a banner inside your business listing to let everyone know about your latest promotions inside your businesses listed.'),
+      icon: <ViewStacked />,
+      info: t('RECOMMENDED_IMAGE_SIZE', 'Recommended size _size_').replace('_size_', '300 x 300'),
+      aspectRatio: 300 / 300,
+      isSearhShow: false
+    },
+    {
+      key: 'app_business_page',
+      title: t('APP_BUSINESS_PAGE', 'App business page'),
+      description: t('BUSINESS_PAGE_BANNER_DESCRIPTION', 'Add a banner inside the business page, and inform news and promotions specifically of the stores customers are ordering from.'),
+      icon: <Shop />,
+      info: t('RECOMMENDED_IMAGE_SIZE', 'Recommended size _size_').replace('_size_', '300 x 300'),
+      aspectRatio: 300 / 300,
+      isSearhShow: true
+    }
+  ]
+
+  const handleSelectBannerPosition = (item) => {
+    setOpenPositionDetail(item)
+  }
+
+  return (
+    <>
+      <AdBannersListingContainer>
+        <HeaderContainer>
+          {isCollapse && (
+            <IconButton
+              color='black'
+              onClick={() => handleMenuCollapse(false)}
+            >
+              <MenuIcon />
+            </IconButton>
+          )}
+          <h1>{t('AD_BANNERS', 'Ad banners')}</h1>
+          <InfoWrapper>
+            <IconButton
+              color='primary'
+            >
+              <InfoCircle />
+            </IconButton>
+            <InfoContent>
+              {t('AD_BANNERS_INFO', 'Add banners for your homepage, business list and inside of each business. Use the recommended measures provided in each option for a better quality of your images.')}
+            </InfoContent>
+          </InfoWrapper>
+        </HeaderContainer>
+        <BannerPositionsList className='row'>
+          {bannerPositions.map(item => (
+            <div key={item.key} className='col-md-4 col-sm-6'>
+              <PostionItemUI
+                title={item.title}
+                description={item.description}
+                icon={item.icon}
+                onClick={() => handleSelectBannerPosition(item)}
+              />
+            </div>
+          ))}
+        </BannerPositionsList>
+      </AdBannersListingContainer>
+
+      {openPositionDetail && (
+        <SideBar
+          open={openPositionDetail}
+          onClose={() => {
+            setOpenPositionDetail(null)
+            setMoveDistance(0)
+          }}
+          defaultSideBarWidth={500 + moveDistance}
+          moveDistance={moveDistance}
+        >
+          <PageBanners
+            setMoveDistance={setMoveDistance}
+            title={openPositionDetail?.title}
+            bannerInfo={openPositionDetail?.info}
+            defaultPosition={openPositionDetail?.key}
+            aspectRatio={openPositionDetail?.aspectRatio}
+            isSearhShow={openPositionDetail?.isSearhShow}
+          />
+        </SideBar>
+      )}
+    </>
+  )
+}

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

@@ -0,0 +1,86 @@
+import styled, { css } from 'styled-components'
+
+export const AdBannersListingContainer = styled.div`
+  flex: 1;
+  padding: 20px;
+  box-sizing: border-box;
+  transition: all 0.5s;
+  overflow: hidden;
+`
+export const HeaderContainer = styled.div`
+  display: flex;
+  align-items: center;
+
+  h1 {
+    font-size: 20px;
+    font-weight: 700;
+    margin: 0;
+  }
+`
+export const BannerPositionsList = styled.div`
+`
+
+export const InfoWrapper = styled.div`
+  position: relative;
+  ${props => props.theme?.rtl ? css`
+    margin-left: -8px;
+    margin-right: 8px;
+  ` : css`
+    margin-right: -8px;
+    margin-left: 8px;
+  `}
+
+  > button {
+    height: 25px;
+    svg {
+      width: 16px;
+      height: 16px;
+    }
+  }
+  &:hover > div {
+    visibility: visible;
+    opacity: 1;
+  }
+`
+
+export const InfoContent = styled.div`
+  position: absolute;
+  top: 100%;
+  z-index: 999;
+  background: ${props => props.theme.colors.backgroundInfo};
+  border: 1px solid ${props => props.theme.colors.primary};
+  box-sizing: border-box;
+  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.12);
+  border-radius: 7.6px;
+  padding: 8px 12px;
+  font-size: 12px;
+  line-height: 18px;
+  min-width: 150px;
+  transition: all 0.3s linear;
+  visibility: hidden;
+  opacity: 0;
+  right: 0px;
+  ${props => props.theme.rtl && css`
+    left: 0px;
+    right: initial;
+  `}
+  span {
+    display: block;
+    user-select: none;
+    color: ${props => props.theme.colors.primary};
+    cursor: pointer;
+    &:hover {
+      text-decoration: underline;
+    }
+  }
+
+  @media (min-width: 576px) {
+    min-width: 330px;
+    padding: 12px 15px;
+    left: 0px;
+    ${props => props.theme.rtl && css`
+      right: 0px;
+      left: initial;
+    `}
+  }
+`

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

@@ -0,0 +1,37 @@
+import React from 'react'
+import { useLanguage } from 'ordering-components-admin-external'
+import { Button, Input } from '../../../styles'
+import {
+  AddBannerContainer,
+  FormController
+} from './styles'
+
+export const AddBanner = (props) => {
+  const {
+    changesState,
+    handleChangeItem,
+    handleAddBanner
+  } = props
+
+  const [, t] = useLanguage()
+
+  return (
+    <AddBannerContainer>
+      <FormController>
+        <label>{t('NAME', 'Name')}</label>
+        <Input
+          defaultValue={changesState.changes?.name || ''}
+          onChange={e => handleChangeItem({ name: e.target.value })}
+        />
+      </FormController>
+      <Button
+        color='primary'
+        borderRadius='8px'
+        disabled={Object.keys(changesState.changes).length === 0 || changesState.loading}
+        onClick={() => handleAddBanner()}
+      >
+        {t('ADD', 'Add')}
+      </Button>
+    </AddBannerContainer>
+  )
+}

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

@@ -0,0 +1,84 @@
+import React, { useState } from 'react'
+import {
+  useUtils,
+  useLanguage
+} from 'ordering-components-admin-external'
+import { PlusCircle } from 'react-bootstrap-icons'
+import { SideBar } from '../../Shared'
+import { BannerImageDetails } from '../BannerImageDetails'
+import {
+  ImagesContainer,
+  BannerImage,
+  UploadImageIconContainer
+} from './styles'
+
+export const BannerImages = (props) => {
+  const {
+    aspectRatio,
+    bannerItemsState,
+    handleAddBannerItem,
+    handleUpdateBannerItem,
+    handleDeleteBannerItem,
+    setBannerMoveDistance
+  } = props
+
+  const [, t] = useLanguage()
+  const [{ optimizeImage }] = useUtils()
+
+  const [openLinkDetails, setOpenLinkDetails] = useState(false)
+  const [selectedImage, setSelectedImage] = useState(null)
+
+  const handleImageLink = (image) => {
+    setSelectedImage(image)
+    setOpenLinkDetails(true)
+    setBannerMoveDistance(500)
+  }
+
+  const handleCloseImageDetail = () => {
+    setBannerMoveDistance(0)
+    setOpenLinkDetails(false)
+    setSelectedImage(null)
+  }
+
+  return (
+    <>
+      <ImagesContainer>
+        {bannerItemsState.images.map(image => (
+          <BannerImage
+            key={image.id}
+            active={selectedImage?.id === image.id}
+            onClick={() => handleImageLink(image)}
+          >
+            <img src={optimizeImage(image?.url, 'h_130,c_limit')} alt='item image' loading='lazy' />
+          </BannerImage>
+        ))}
+        <BannerImage
+          onClick={() => handleImageLink(null)}
+        >
+          <UploadImageIconContainer>
+            <PlusCircle />
+            <p>{t('ADD', 'Add')}</p>
+          </UploadImageIconContainer>
+        </BannerImage>
+      </ImagesContainer>
+
+      {openLinkDetails && (
+        <SideBar
+          open={openLinkDetails}
+          onClose={() => handleCloseImageDetail()}
+          isBorderShow
+        >
+          <BannerImageDetails
+            key={selectedImage?.id}
+            image={selectedImage}
+            aspectRatio={aspectRatio}
+            onClose={() => handleCloseImageDetail()}
+            handleUpdateBannerItem={handleUpdateBannerItem}
+            handleAddBannerItem={handleAddBannerItem}
+            handleDeleteBannerItem={handleDeleteBannerItem}
+          />
+        </SideBar>
+      )}
+    </>
+  )
+}