ordering-ui-admin-external 1.14.3 → 1.15.0

package/src/components/Loyalty/GiftCardDetail/styles.js

@@ -0,0 +1,192 @@
+import styled, { css } from 'styled-components'
+import { darken } from 'polished'
+
+export const Container = styled.div`
+  width: 100%;
+  min-height: calc(var(--vh, 1vh) * 100 - 150px);
+  padding: 20px;
+`
+
+export const DetailsHeader = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+`
+
+export const LevelName = styled.h1`
+  color: ${props => props.theme.colors.headingColor};
+  font-size: 20px;
+  margin: 0px;
+  font-weight: 700;
+
+  ${props => props.theme?.rtl ? css`
+    margin-left: 10px;
+  ` : css`
+    margin-right: 10px;
+  `}
+`
+
+export const LeftHeader = styled.div`
+  display: flex;
+  align-items: center;
+  margin-bottom: 24px;
+  ${props => props.theme?.rtl ? css`
+    margin-left: 10px;
+  ` : css`
+    margin-right: 10px;
+  `}
+`
+
+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;
+  `}
+
+  button {
+    background: transparent !important;
+    border: none;
+    padding: 0px 5px;
+    &:active,
+    &:focus {
+      border-color: unset !important;
+      box-shadow: none !important;
+    }
+    svg {
+      color: ${props => props.theme.colors.headingColor};
+      font-size: 20px;
+    }
+
+    &:after {
+      display: none;
+    }
+
+    &:hover {
+      background: ${props => darken(0.04, props.theme.colors.secundary)} !important;
+    }
+    &:active {
+      background: ${props => darken(0.1, props.theme.colors.secundary)} !important;
+    }
+  }
+
+  .show {
+    button {
+      background: ${props => darken(0.04, props.theme.colors.secundary)} !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;
+        padding: 6px 20px;
+        color: ${props => props.theme.colors.headingColor};
+        &:active {
+          background: ${props => darken(0.1, props.theme.colors.secundary)} !important;
+        }
+      }
+      .dropdown-item:last-child {
+        color: #E63757;
+      }
+    }
+  }
+`
+
+export const Content = styled.form`
+  height: calc(100% - 70px);
+`
+
+export const FormController = styled.div`
+  display: flex;
+  flex-direction: column;
+  margin-top: 40px;
+
+  label {
+    color: ${props => props.theme.colors.headingColor};
+    margin-bottom: 10px;
+    font-size: 14px;
+    position: relative;
+  }
+
+  input,
+  textarea {
+    color: ${props => props.theme.colors.headingColor};
+  }
+`
+
+export const ButtonWrapper = styled.div`
+  position: sticky;
+  top: 100%;
+  padding: 20px 0;
+
+  button {
+    height: 44px;
+    border-radius: 8px;
+  }
+`
+
+export const LoyaltyImage = styled.div`
+  width: 200px;
+  height: 200px;
+  border-radius: 8px;
+  overflow: hidden;
+  cursor: -webkit-grab;
+  cursor: grab;
+  filter: drop-shadow(0px 1px 4px rgba(0, 0, 0, 0.1));
+
+  img,
+  div {
+    width: 100%;
+    border-radius: 8px;
+    height: 100%;
+    overflow: hidden;
+  };
+
+  img{
+    object-fit: cover;
+  }
+`
+
+export const UploadImageIconContainer = styled.div`
+  position: absolute;
+  top: 0px;
+  background: rgba(0,0,0,0.2);
+  ${({ small }) => small ? css`
+    padding: 4px;
+  ` : css`
+    padding: 8px;
+  `}
+`
+
+export const UploadImageIcon = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+  color: #FFF;
+  border: 1px dashed #fff;
+  span {
+    margin: 0;
+    text-align: center;
+    font-size: 14px;
+  }
+
+  svg {   
+    width: 45px;
+    height: 45px;
+  }
+`

package/src/components/Loyalty/GiftCards/index.js

@@ -1,4 +1,5 @@
 import React, { useState, useEffect } from 'react'
+import { useHistory, useLocation } from 'react-router-dom'
 import { useLanguage, useUtils, PlatformProductsList as PlatformProductsListController } from 'ordering-components-admin-external'
 import { Alert, NotFoundSource, SideBar, Modal } from '../../Shared'
 // import { Switch } from '../../../styles'
@@ -34,6 +35,8 @@ const GiftCardsUI = (props) => {
     handleSuccessAddProduct
   } = props
 
+  const history = useHistory()
+  const query = new URLSearchParams(useLocation().search)
   const [, t] = useLanguage()
   const theme = useTheme()
   const [{ optimizeImage, parsePrice }] = useUtils()
@@ -50,18 +53,24 @@ const GiftCardsUI = (props) => {
     })
   }
 
-  const handleOpenDetail = (level) => {
-    setSelectedProduct(level)
+  const handleOpenDetail = (product, isInitialRender) => {
+    setSelectedProduct(product)
     setExtraOpen(true)
     if (width >= 1100) {
       handleParentSidebarMove(550)
     }
+    if (product && !isInitialRender) {
+      const id = query.get('id')
+      history.replace(`${location.pathname}?id=${id}&product=${product.id}`)
+    }
   }
 
   const handleGiftDetail = () => {
     setExtraOpen(false)
     setSelectedProduct(null)
     handleParentSidebarMove(0)
+    const id = query.get('id')
+    history.replace(`${location.pathname}?id=${id}`)
   }
 
   useEffect(() => {
@@ -72,6 +81,17 @@ const GiftCardsUI = (props) => {
     }
   }, [width, extraOpen])
 
+  useEffect(() => {
+    if (platformProductsListState.loading) return
+    const productId = query.get('product')
+    if (productId) {
+      const initProduct = platformProductsListState?.products.find(product => product.id === Number(productId))
+      if (initProduct) {
+        handleOpenDetail(initProduct, true)
+      }
+    }
+  }, [platformProductsListState.loading])
+
   return (
     <Container>
       <HeaderContainer>

package/src/components/Loyalty/PointsWalletBusinessList/index.js

@@ -1,4 +1,5 @@
 import React, { useState, useEffect } from 'react'
+import { useHistory, useLocation } from 'react-router-dom'
 import { useLanguage, useUtils, PointsWalletBusinessList as PointsWalletBusinessListController } from 'ordering-components-admin-external'
 import Skeleton from 'react-loading-skeleton'
 import { useTheme } from 'styled-components'
@@ -34,6 +35,8 @@ const PointsWalletBusinessListUI = (props) => {
     isCloseBusinessDetails
   } = props
 
+  const history = useHistory()
+  const query = new URLSearchParams(useLocation().search)
   const [, t] = useLanguage()
   const [{ optimizeImage }] = useUtils()
   const theme = useTheme()
@@ -69,7 +72,7 @@ const PointsWalletBusinessListUI = (props) => {
   }
 
   const handleClickBusiness = (business, e) => {
-    if (e.target.closest('.accumulates') || e.target.closest('.redeems') || e.target.closest('.wallet_enabled')) return
+    if (e?.target?.closest('.accumulates') || e?.target?.closest('.redeems') || e?.target?.closest('.wallet_enabled')) return
     if (!pointWallet) {
       setAlertState({ open: true, content: [t('YOU_MUST_CREATE_LOYALTY_PLAN', 'You must create a loyalty plan')] })
       return
@@ -80,6 +83,9 @@ const PointsWalletBusinessListUI = (props) => {
     }
     setSelectedBusiness(business)
     setExtraOpen(true)
+    const id = query.get('id')
+    const tab = query.get('tab')
+    history.replace(`${location.pathname}?id=${id}&tab=${tab}&business_id=${business?.id}`)
     if (width >= 1100) {
       handleParentSidebarMove(550)
     }
@@ -89,6 +95,9 @@ const PointsWalletBusinessListUI = (props) => {
     setExtraOpen(false)
     setSelectedBusiness(null)
     handleParentSidebarMove(0)
+    const id = query.get('id')
+    const tab = query.get('tab')
+    history.replace(`${location.pathname}?id=${id}&tab=${tab}`)
   }
 
   const updateBusinessList = (changes) => {
@@ -136,8 +145,22 @@ const PointsWalletBusinessListUI = (props) => {
     if (!isCloseBusinessDetails) return
     setExtraOpen(false)
     setSelectedBusiness(null)
+    const id = query.get('id')
+    const tab = query.get('tab')
+    history.replace(`${location.pathname}?id=${id}&tab=${tab}`)
   }, [isCloseBusinessDetails])
 
+  useEffect(() => {
+    if (businessList.loading) return
+    const businessId = query.get('business_id')
+    if (businessId) {
+      const business = businessList.businesses.find(item => item.id === Number(businessId))
+      if (business) {
+        handleClickBusiness(business)
+      }
+    }
+  }, [businessList])
+
   return (
     <Container>
       <SearchWrapper>

package/src/components/Loyalty/PointsWalletLevels/index.js

@@ -1,4 +1,5 @@
 import React, { useState, useEffect } from 'react'
+import { useHistory, useLocation } from 'react-router-dom'
 import { useLanguage, useUtils, PointsWalletLevels as PointsWalletLevelsController } from 'ordering-components-admin-external'
 import { Alert, SideBar, Modal } from '../../Shared'
 import { ChevronRight } from 'react-bootstrap-icons'
@@ -29,6 +30,8 @@ const PointsWalletLevelsUI = (props) => {
     handleParentSidebarMove
   } = props
 
+  const history = useHistory()
+  const query = new URLSearchParams(useLocation().search)
   const [, t] = useLanguage()
   const theme = useTheme()
   const [{ optimizeImage }] = useUtils()
@@ -45,18 +48,24 @@ const PointsWalletLevelsUI = (props) => {
     })
   }
 
-  const handleOpenDetail = (level) => {
+  const handleOpenDetail = (level, isInitialRender) => {
     setSelectedLevel(level)
     setExtraOpen(true)
     if (width >= 1100) {
       handleParentSidebarMove(550)
     }
+    if (level && !isInitialRender) {
+      const id = query.get('id')
+      history.replace(`${location.pathname}?id=${id}&level=${level.id}`)
+    }
   }
 
   const handleCloseLevelDetail = () => {
     setExtraOpen(false)
     setSelectedLevel(null)
     handleParentSidebarMove(0)
+    const id = query.get('id')
+    history.replace(`${location.pathname}?id=${id}`)
   }
 
   useEffect(() => {
@@ -67,6 +76,17 @@ const PointsWalletLevelsUI = (props) => {
     }
   }, [width, extraOpen])
 
+  useEffect(() => {
+    if (levelList.loading) return
+    const levelId = query.get('level')
+    if (levelId) {
+      const initLevel = levelList?.levels.find(level => level.id === Number(levelId))
+      if (initLevel) {
+        handleOpenDetail(initLevel, true)
+      }
+    }
+  }, [levelList.loading])
+
   return (
     <Container>
       <Title>{t('LEVELS', 'Levels')}</Title>

package/src/components/Loyalty/RewardsPrograms/index.js

@@ -1,4 +1,5 @@
-import React, { useState } from 'react'
+import React, { useEffect, useState } from 'react'
+import { useHistory, useLocation } from 'react-router-dom'
 import { List as MenuIcon, BarChartSteps, Gift, Wallet as Cash, InfoCircle } from 'react-bootstrap-icons'
 import { useLanguage } from 'ordering-components-admin-external'
 import { useInfoShare } from '../../../contexts/InfoShareContext'
@@ -6,6 +7,7 @@ import { IconButton } from '../../../styles'
 import { SideBar } from '../../Shared'
 import { Wallet } from '../Wallet'
 import { PointsWalletLevels } from '../PointsWalletLevels'
+import { GiftCards } from '../GiftCards'
 
 import {
   Container,
@@ -19,30 +21,55 @@ import {
 } from './styles'
 
 export const RewardsPrograms = () => {
+  const history = useHistory()
+  const query = new URLSearchParams(useLocation().search)
   const [, t] = useLanguage()
   const [{ isCollapse }, { handleMenuCollapse }] = useInfoShare()
 
   const [showOption, setShowOption] = useState(null)
   const [moveDistance, setMoveDistance] = useState(0)
   const [levelMoveDistance, setLevelMoveDistance] = useState(0)
+  const [giftCardMoveDistance, setGiftCardMoveDistance] = useState(0)
 
   const walletList = [
     { key: 'credit_point', name: t('POINTS_WALLET', 'Points wallet'), description: t('POINTS_WALLET_DESCRIPTION', 'Points wallet general and per business setup.'), icon: <Cash /> },
     { key: 'levels', name: t('LEVELS', 'Levels'), description: t('LEVELS_DESCRIPTION', 'Setup different loyalty levels for your users.'), icon: <BarChartSteps /> },
-    // { key: 'gift_card', name: t('GIFT_CARD', 'Gift Card'), description: t('GIFT_CARD_DESCRIPTION', 'Setup different gift cards for your customers.'), icon: <Gift /> },
+    { key: 'gift_card', name: t('GIFT_CARD', 'Gift Card'), description: t('GIFT_CARD_DESCRIPTION', 'Setup different gift cards for your customers.'), icon: <Gift /> },
     { key: 'cashback', name: t('CASH_WALLET', 'Cash wallet'), description: t('CASH_WALLET_DESCRIPTION', 'Cash wallet general and per business setup.'), icon: <Cash /> }
   ]
 
   const hanldeClosePointsWallet = () => {
     setMoveDistance(0)
     setShowOption(null)
+    history.replace(`${location.pathname}`)
   }
 
   const handleCloseLevel = () => {
     setLevelMoveDistance(0)
     setShowOption(null)
+    history.replace(`${location.pathname}`)
   }
 
+  const handleCloseGiftCard = () => {
+    setGiftCardMoveDistance(0)
+    setShowOption(null)
+    history.replace(`${location.pathname}`)
+  }
+
+  const handleOptionClick = (key, isInitialRender) => {
+    setShowOption(key)
+    if (!isInitialRender) {
+      history.replace(`${location.pathname}?id=${key}`)
+    }
+  }
+
+  useEffect(() => {
+    const id = query.get('id')
+    if (id) {
+      handleOptionClick(id, true)
+    }
+  }, [])
+
   return (
     <>
       <Container>
@@ -72,7 +99,7 @@ export const RewardsPrograms = () => {
           {walletList.map(item => (
             <LoyaltyItemWrapper
               key={item.key}
-              onClick={() => setShowOption(item.key)}
+              onClick={() => handleOptionClick(item.key)}
             >
               <IconWrapper>
                 {item.icon}

package/src/components/Loyalty/Wallet/index.js

@@ -1,4 +1,5 @@
 import React, { useEffect, useState } from 'react'
+import { useHistory, useLocation } from 'react-router-dom'
 import { useLanguage, RewardsPrograms as RewardsProgramsController } from 'ordering-components-admin-external'
 import { PointsWalletBusinessDetail } from '../PointsWalletBusinessDetail'
 import { PointsWalletBusinessList } from '../PointsWalletBusinessList'
@@ -25,6 +26,8 @@ const WalletUI = (props) => {
     title
   } = props
 
+  const history = useHistory()
+  const query = new URLSearchParams(useLocation().search)
   const [, t] = useLanguage()
   const { width } = useWindowSize()
 
@@ -48,6 +51,24 @@ const WalletUI = (props) => {
     if (selectedOption !== 'business') handleParentSidebarMove(0)
   }, [selectedOption])
 
+  const handleTabClick = (tab, isInitialRender) => {
+    setSelectedOption(tab)
+    if (!isInitialRender) {
+      const id = query.get('id')
+      history.replace(`${location.pathname}?id=${id}&tab=${tab}`)
+    }
+  }
+
+  useEffect(() => {
+    if (loyaltyPlanList?.loading) return
+    const tab = query.get('tab')
+    if (tab) {
+      handleTabClick(tab, true)
+    } else {
+      handleTabClick(selectedOption)
+    }
+  }, [loyaltyPlanList?.loading])
+
   return (
     <Container>
       <Header>
@@ -66,7 +87,7 @@ const WalletUI = (props) => {
           <Tab
             key={option.key}
             active={selectedOption === option.key}
-            onClick={() => setSelectedOption(option.key)}
+            onClick={() => handleTabClick(option.key)}
           >
             {option.name}
           </Tab>

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

@@ -1,4 +1,5 @@
-import React, { useState } from 'react'
+import React, { useEffect, useState } from 'react'
+import { useHistory, useLocation } from 'react-router-dom'
 import { useLanguage } from 'ordering-components-admin-external'
 import { useInfoShare } from '../../../contexts/InfoShareContext'
 import { IconButton } from '../../../styles'
@@ -16,6 +17,8 @@ import {
 } from './styles'
 
 export const AdBannersListing = (props) => {
+  const history = useHistory()
+  const query = new URLSearchParams(useLocation().search)
   const [, t] = useLanguage()
   const [{ isCollapse }, { handleMenuCollapse }] = useInfoShare()
   const [openPositionDetail, setOpenPositionDetail] = useState(null)
@@ -69,10 +72,27 @@ export const AdBannersListing = (props) => {
     }
   ]
 
-  const handleSelectBannerPosition = (item) => {
-    setOpenPositionDetail(item)
+  const handleSelectBannerPosition = (key, isInitialRender) => {
+    const selectedItem = bannerPositions.find(item => item.key === key)
+    setOpenPositionDetail(selectedItem)
+    if (!isInitialRender) {
+      history.replace(`${location.pathname}?position=${key}`)
+    }
+  }
+
+  const handleCloseDetails = () => {
+    setOpenPositionDetail(null)
+    setMoveDistance(0)
+    history.replace(`${location.pathname}`)
   }
 
+  useEffect(() => {
+    const position = query.get('position')
+    if (position) {
+      handleSelectBannerPosition(position, true)
+    }
+  }, [])
+
   return (
     <>
       <AdBannersListingContainer>
@@ -104,7 +124,7 @@ export const AdBannersListing = (props) => {
                 title={item.title}
                 description={item.description}
                 icon={item.icon}
-                onClick={() => handleSelectBannerPosition(item)}
+                onClick={() => handleSelectBannerPosition(item.key)}
               />
             </div>
           ))}
@@ -114,10 +134,7 @@ export const AdBannersListing = (props) => {
       {openPositionDetail && (
         <SideBar
           open={openPositionDetail}
-          onClose={() => {
-            setOpenPositionDetail(null)
-            setMoveDistance(0)
-          }}
+          onClose={() => handleCloseDetails()}
           defaultSideBarWidth={500 + moveDistance}
           moveDistance={moveDistance}
         >

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

@@ -231,7 +231,8 @@ const BannerImageDetailsUI = (props) => {
 export const BannerImageDetails = (props) => {
   const linkProps = {
     ...props,
-    UIComponent: BannerImageDetailsUI
+    UIComponent: BannerImageDetailsUI,
+    isSearchByName: true
   }
   return <BannerImageDetailsController {...linkProps} />
 }

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

@@ -1,4 +1,5 @@
 import React, { useState, useEffect } from 'react'
+import { useHistory, useLocation } from 'react-router-dom'
 import { useTheme } from 'styled-components'
 import { Dropdown, DropdownButton } from 'react-bootstrap'
 import { useLanguage, CampaignDetail as CampaignDetailController } from 'ordering-components-admin-external'
@@ -28,6 +29,8 @@ const CampaignDetailUI = (props) => {
     handleDeleteCampaign
   } = props
 
+  const history = useHistory()
+  const query = new URLSearchParams(useLocation().search)
   const theme = useTheme()
   const [, t] = useLanguage()
   const { width } = useWindowSize()
@@ -76,6 +79,24 @@ const CampaignDetailUI = (props) => {
     })
   }, [formState?.error])
 
+  const handleTabClick = (tab, isInitialRender) => {
+    setSelectedOption(tab)
+
+    if (!isInitialRender) {
+      const id = query.get('id')
+      history.replace(`${location.pathname}?id=${id}&tab=${tab}`)
+    }
+  }
+
+  useEffect(() => {
+    const tab = query.get('tab')
+    if (tab) {
+      handleTabClick(tab, true)
+    } else {
+      handleTabClick(selectedOption)
+    }
+  }, [])
+
   return (
     <>
       <CampaignDetailContainer>
@@ -117,7 +138,7 @@ const CampaignDetailUI = (props) => {
             <Tab
               key={option.key}
               active={selectedOption === option.key}
-              onClick={() => setSelectedOption(option.key)}
+              onClick={() => handleTabClick(option.key)}
             >
               {option.name}
             </Tab>

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

@@ -145,3 +145,6 @@ export const Description = styled.div`
     }
   }
 `
+export const BottomSpace = styled.div`
+  height: 1px;
+`

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

@@ -1,4 +1,5 @@
-import React, { useState } from 'react'
+import React, { useEffect, useState } from 'react'
+import { useHistory, useLocation } from 'react-router-dom'
 import { SideBar } from '../../Shared'
 import { CampaignDetail } from '../CampaignDetail'
 import { CampaignHeader } from '../CampaignHeader'
@@ -9,19 +10,34 @@ import {
 } from './styles'
 
 export const CampaignListingUI = (props) => {
+  const history = useHistory()
+  const query = new URLSearchParams(useLocation().search)
   const [isOpenDetail, setIsOpenDetail] = useState(false)
   const [selectedCampaign, setSelectedCampaign] = useState(null)
+  const [selectedCampaignId, setSelectedCampaignId] = useState(null)
 
   const handleOpenDetail = (action) => {
     setSelectedCampaign(action)
+    setSelectedCampaignId(action?.id)
     setIsOpenDetail(true)
+    action && history.replace(`${location.pathname}?id=${action?.id}`)
   }
 
   const handleCloseDetail = () => {
     setIsOpenDetail(false)
     setSelectedCampaign(null)
+    history.replace(`${location.pathname}`)
   }
 
+  useEffect(() => {
+    const id = query.get('id')
+    if (id) {
+      setSelectedCampaign({})
+      setSelectedCampaignId(Number(id))
+      setIsOpenDetail(true)
+    }
+  }, [])
+
   return (
     <>
       <CampaignListingContainer>
@@ -46,6 +62,7 @@ export const CampaignListingUI = (props) => {
           <CampaignDetail
             {...props}
             campaign={selectedCampaign}
+            campaignId={selectedCampaignId}
             onClose={() => handleCloseDetail()}
           />
         </SideBar>

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

@@ -106,3 +106,6 @@ export const Description = styled.div`
     }
   }
 `
+export const BottomSpace = styled.div`
+  height: 1px;
+`