ordering-ui-admin-external 1.14.2 → 1.15.0

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

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

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

@@ -160,7 +160,8 @@ export const EnterprisePromotionGeneralDetails = (props) => {
   }, [isShowCalendar])
 
   useEffect(() => {
-    if (Object.keys(promotionState?.promotion).length) {
+    if (promotionState.loading) return
+    if (promotionState?.promotion && Object.keys(promotionState?.promotion).length) {
       setDateRange([
         {
           startDate: new Date(promotionState?.promotion?.start),

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

@@ -1,4 +1,5 @@
 import React, { useState, useEffect } from 'react'
+import { useHistory, useLocation } from 'react-router-dom'
 import { useConfig, useSession, useLanguage, EnterprisePromotionList as EnterprisePromontioListController } from 'ordering-components-admin-external'
 import { List as MenuIcon } from 'react-bootstrap-icons'
 import { useInfoShare } from '../../../contexts/InfoShareContext'
@@ -28,6 +29,8 @@ const EnterprisePromotionListingUI = (props) => {
     handleSuccessDeletePromotion
   } = props
 
+  const history = useHistory()
+  const query = new URLSearchParams(useLocation().search)
   const [, t] = useLanguage()
   const [{ configs }] = useConfig()
   const [{ user }] = useSession()
@@ -39,17 +42,23 @@ const EnterprisePromotionListingUI = (props) => {
   const [{ isCollapse }, { handleMenuCollapse }] = useInfoShare()
   const [openDetails, setOpenDetails] = useState(false)
   const [selectedPromotion, setSelectedPromotion] = useState(null)
+  const [curPromotionId, setCurPromotionId] = useState(null)
   const [moveDistance, setMoveDistance] = useState(0)
 
   const handleOpenDetails = (promotion) => {
     setMoveDistance(0)
     setSelectedPromotion(promotion)
+    setCurPromotionId(promotion?.id)
     setOpenDetails(true)
+    if (promotion) {
+      history.replace(`${location.pathname}?id=${promotion?.id}`)
+    }
   }
 
   const handleCloseDetails = () => {
     setOpenDetails(false)
     setSelectedPromotion(null)
+    history.replace(`${location.pathname}`)
   }
 
   useEffect(() => {
@@ -69,6 +78,14 @@ const EnterprisePromotionListingUI = (props) => {
     }
   }, [configs])
 
+  useEffect(() => {
+    const id = query.get('id')
+    if (id) {
+      setCurPromotionId(Number(id))
+      setOpenDetails(true)
+    }
+  }, [])
+
   return (
     <>
       <PromotionsListingContainer>
@@ -88,7 +105,7 @@ const EnterprisePromotionListingUI = (props) => {
             <Button
               color='lightPrimary'
               borderRadius='8px'
-              onClick={() => handleOpenDetails({})}
+              onClick={() => handleOpenDetails(null)}
             >
               {t('ADD_PROMOTION_ENTERPRISE', 'Add promotion enterprise')}
             </Button>
@@ -120,6 +137,7 @@ const EnterprisePromotionListingUI = (props) => {
             businessesList={businessesList}
             paymethodsState={paymethodsState}
             promotion={selectedPromotion}
+            promotionId={curPromotionId}
             promotionsList={promotionListState.promotions}
             handleSuccessUpdatePromotions={handleSuccessUpdatePromotions}
             handleSuccessAddPromotion={handleSuccessAddPromotion}

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

@@ -1,4 +1,5 @@
 import React, { useState, useEffect } from 'react'
+import { useHistory, useLocation } from 'react-router-dom'
 import { useLanguage, AdBannersList as AdBannersListController } from 'ordering-components-admin-external'
 import Skeleton from 'react-loading-skeleton'
 import { SideBar, Alert, SearchBar } from '../../Shared'
@@ -37,6 +38,9 @@ const PageBannersUI = (props) => {
     aspectRatio,
     isSearhShow
   } = props
+
+  const history = useHistory()
+  const query = new URLSearchParams(useLocation().search)
   const [, t] = useLanguage()
   const { width } = useWindowSize()
 
@@ -47,18 +51,24 @@ const PageBannersUI = (props) => {
   const [bannerMoveDistance, setBannerMoveDistance] = useState(0)
   const [isExpand, setIsExpand] = useState(false)
 
-  const handleOpenBannerItemsDetail = (e, banner) => {
-    const isInvalid = e.target.closest('.banner-enabled')
+  const handleOpenBannerItemsDetail = (e, banner, isInitialRender) => {
+    const isInvalid = e?.target?.closest('.banner-enabled')
     if (isInvalid) return
     setSelectedBanner(banner)
     setOpenItemsDetail(true)
     setMoveDistance(500)
+    if (banner && !isInitialRender) {
+      const position = query.get('position')
+      history.replace(`${location.pathname}?position=${position}&banner=${banner?.id}`)
+    }
   }
 
   const handleCloseDetail = () => {
     setMoveDistance(0)
     setOpenItemsDetail(false)
     setSelectedBanner(null)
+    const position = query.get('position')
+    history.replace(`${location.pathname}?position=${position}`)
   }
 
   const expandSidebar = () => {
@@ -78,13 +88,26 @@ const PageBannersUI = (props) => {
 
   useEffect(() => {
     setSearchValue('')
-    handleCloseDetail()
+    setMoveDistance(0)
+    setOpenItemsDetail(false)
+    setSelectedBanner(null)
   }, [defaultPosition])
 
   useEffect(() => {
     if (openItemsDetail) setIsExpand(false)
   }, [openItemsDetail])
 
+  useEffect(() => {
+    if (bannersListState.loading) return
+    const bannerId = query.get('banner')
+    if (bannerId) {
+      const initBanner = bannersListState.banners.find(banner => banner.id === Number(bannerId))
+      if (initBanner) {
+        handleOpenBannerItemsDetail(null, initBanner, true)
+      }
+    }
+  }, [bannersListState.loading])
+
   return (
     <>
       <Container>

package/src/components/Messages/MessagesListing/index.js

@@ -1,4 +1,5 @@
 import React, { useEffect, useState } from 'react'
+import { useHistory, useLocation } from 'react-router-dom'
 import { useLanguage, OrdersManage as OrdersManageController } from 'ordering-components-admin-external'
 import { OrdersContentHeader, OrdersDashboardList, OrderNotification, OrderDetails, Messages } from '../../Orders'
 import { Button } from '../../../styles/Buttons'
@@ -34,6 +35,9 @@ const MessagesListingUI = (props) => {
     handleChangeFilterValues
   } = props
 
+  const history = useHistory()
+  const query = new URLSearchParams(useLocation().search)
+
   const [, t] = useLanguage()
   const { width } = useWindowSize()
   const [selectedOption, setSelectedOption] = useState('orders')
@@ -44,11 +48,14 @@ const MessagesListingUI = (props) => {
   const [detailsOrder, setDetailsOrder] = useState(null)
   const [selectedOrder, setSelectedOrder] = useState(null)
   const [orderIdForUnreadCountUpdate, setOrderIdForUnreadCountUpdate] = useState(null)
+  const [filterModalOpen, setFilterModalOpen] = useState(false)
 
   const handleOpenOrderDetail = (order) => {
     setDetailsOrder(order)
     setOrderDetailId(order.id)
     setIsOpenOrderDetail(true)
+
+    history.replace(`${location.pathname}?id=${order.id}`)
   }
 
   const handleOrderCardClick = (order) => {
@@ -60,6 +67,14 @@ const MessagesListingUI = (props) => {
     document.body.style.overflow = isOpenOrderDetail ? 'hidden' : 'auto'
   }, [width, isOpenOrderDetail])
 
+  useEffect(() => {
+    const id = query.get('id')
+    if (id) {
+      setOrderDetailId(id)
+      setIsOpenOrderDetail(true)
+    }
+  }, [])
+
   return (
     <>
       <MessagesListingContainer id='deliveryDashboard'>
@@ -74,6 +89,8 @@ const MessagesListingUI = (props) => {
           filterValues={filterValues}
           handleChangeSearch={handleChangeSearch}
           handleChangeFilterValues={handleChangeFilterValues}
+          filterModalOpen={filterModalOpen}
+          setFilterModalOpen={setFilterModalOpen}
         />
         <MessagesContent>
           <OrdersContainer>

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

@@ -0,0 +1,64 @@
+import React from 'react'
+import { useLanguage } from 'ordering-components-admin-external'
+import { RecordCircleFill, Circle } from 'react-bootstrap-icons'
+import { Select } from '../../../styles/Select/FirstSelect'
+import {
+  FormControl,
+  Option,
+  SelectWrapper,
+  FontWeightListWrapper,
+  FontWeightItem
+} from './styles'
+
+export const FontStyleGroup = (props) => {
+  const { isBody, fonts, path, handleUpdateThemeValue } = props
+  const [, t] = useLanguage()
+
+  const fontFamilyList = [
+    { value: 'Poppins', content: <Option>{t('POPPINS', 'Poppins')}</Option> },
+    { value: 'Lobster', content: <Option>{t('LOBSTER', 'Lobster')}</Option> },
+    { value: 'Raleway', content: <Option>{t('RALEWAY', 'Raleway')}</Option> }
+  ]
+
+  const fontWeightList = [
+    { value: 100, name: '100 - Thin' },
+    { value: 200, name: '200 - Extra Light (Ultra Light)' },
+    { value: 300, name: '300 - Light' },
+    { value: 400, name: '400 - Normal' },
+    { value: 500, name: '500 - Medium' },
+    { value: 600, name: '600 - Semi Bold (Demi Bold)' },
+    { value: 700, name: '700 - Bold' },
+    { value: 800, name: '800 - Extra Bold (Ultra Bold)' },
+    { value: 900, name: '900 - Black (Heavy)' }
+  ]
+
+  return (
+    <>
+      <FormControl>
+        <label>{t('FONT', 'Font')}</label>
+        <SelectWrapper>
+          <Select
+            options={fontFamilyList}
+            className='select'
+            defaultValue={fonts?.name}
+            placeholder={t('SELECT_OPTION', 'Select an option')}
+            onChange={(value) => handleUpdateThemeValue(value, [path, 'name'].join('.'))}
+          />
+        </SelectWrapper>
+      </FormControl>
+      <FormControl>
+        <label>
+          {isBody ? t('FONT_SPECIAL_WEIGHTS', 'Font special weights') : t('FONT_PRIMARY_WEIGHTS', 'Font primary weights')}
+        </label>
+        <FontWeightListWrapper>
+          {fontWeightList.map(weight => (
+            <FontWeightItem key={weight.value} onClick={() => handleUpdateThemeValue([weight?.value], [path, 'weights'].join('.'))}>
+              {fonts?.weights?.includes(weight.value) ? <RecordCircleFill className='active' /> : <Circle />}
+              <span>{weight.name}</span>
+            </FontWeightItem>
+          ))}
+        </FontWeightListWrapper>
+      </FormControl>
+    </>
+  )
+}

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

@@ -0,0 +1,40 @@
+import React from 'react'
+import { useLanguage } from 'ordering-components-admin-external'
+import { Input } from '../../../styles'
+import {
+  FormControl
+} from './styles'
+
+export const OrderType = (props) => {
+  const { path, typeValues, handleUpdateThemeValue } = props
+  const [, t] = useLanguage()
+
+  return (
+    <>
+      <FormControl>
+        <label>{t('TITLE', 'Title')}</label>
+        <Input
+          placeholder={t('TITLE', 'Title')}
+          defaultValue={typeValues?.title || ''}
+          onChange={(e) => handleUpdateThemeValue(e.target.value, [path, 'title'].join('.'))}
+        />
+      </FormControl>
+      <FormControl>
+        <label>{t('DESCRIPTION', 'Description')}</label>
+        <Input
+          placeholder={t('DESCRIPTION', 'Description')}
+          defaultValue={typeValues?.description || ''}
+          onChange={(e) => handleUpdateThemeValue(e.target.value, [path, 'description'].join('.'))}
+        />
+      </FormControl>
+      <FormControl>
+        <label>{t('CALL_TO_ACTION', 'Call to action')}</label>
+        <Input
+          placeholder={t('CALL_TO_ACTION', 'Call to action')}
+          defaultValue={typeValues?.call_to_action || ''}
+          onChange={(e) => handleUpdateThemeValue(e.target.value, [path, 'call_to_action'].join('.'))}
+        />
+      </FormControl>
+    </>
+  )
+}

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

@@ -0,0 +1,104 @@
+import React from 'react'
+import { useLanguage } from 'ordering-components-admin-external'
+import { Select } from '../../../styles/Select/FirstSelect'
+import { ImageBox } from './ImageBox'
+import {
+  CheckSquareFill as CheckedIcon,
+  Square as UnCheckedIcon
+} from 'react-bootstrap-icons'
+import {
+  FormControl,
+  HideCheckWrapper,
+  SelectWrapper,
+  Option
+} from './styles'
+import { ColorPicker } from '../../Shared'
+import { Input } from '../../../styles'
+
+export const SettingComponent = (props) => {
+  const { settingList, handleUpdateThemeValue, advancedValues, themeStructure } = props
+
+  const [, t] = useLanguage()
+
+  const deepFind = (obj, path) => {
+    const paths = path.split('.')
+    let current = JSON.parse(JSON.stringify(obj))
+    let i
+
+    for (i = 0; i < paths.length; ++i) {
+      if (current[paths[i]] === undefined) {
+        return undefined
+      } else {
+        current = current[paths[i]]
+      }
+    }
+    return current
+  }
+
+  const getOptions = (path) => {
+    const options = deepFind(themeStructure, [path, 'options'].join('.'))
+    if (!options) return []
+    const updatedOptions = options.map(option => ({ value: option, content: <Option>{t(option.toString().toUpperCase(), option)}</Option> }))
+    return updatedOptions
+  }
+
+  return (
+    <>
+      {settingList.map((setting, i) => (
+        <React.Fragment key={i}>
+          {setting.type === 'hidden' && (
+            <FormControl>
+              <label>{setting.name}</label>
+              <HideCheckWrapper onClick={() => handleUpdateThemeValue(!deepFind(advancedValues, setting?.path), setting?.path)}>
+                {deepFind(advancedValues, setting?.path) ? <CheckedIcon className='active' /> : <UnCheckedIcon />}
+                <span>{t('HIDDEN', 'Hidden')}</span>
+              </HideCheckWrapper>
+            </FormControl>
+          )}
+          {setting.type === 'position' && (
+            <FormControl>
+              <label>{setting.name}</label>
+              <SelectWrapper>
+                <Select
+                  options={getOptions(setting?.path)}
+                  className='select'
+                  defaultValue={deepFind(advancedValues, setting?.path)}
+                  placeholder={t('SELECT_OPTION', 'Select an option')}
+                  onChange={(value) => handleUpdateThemeValue(value, setting?.path)}
+                />
+              </SelectWrapper>
+            </FormControl>
+          )}
+          {setting.type === 'image' && (
+            <ImageBox
+              title={setting.name}
+              ratio='900 x 200 px'
+              photo={deepFind(advancedValues, setting?.path)}
+              path={setting?.path}
+              handleChangePhoto={handleUpdateThemeValue}
+            />
+          )}
+          {setting.type === 'color' && (
+            <FormControl>
+              <label>{setting.name}</label>
+              <ColorPicker
+                defaultColor={deepFind(advancedValues, setting?.path) || '#2C7BE5'}
+                onChangeColor={(color) => handleUpdateThemeValue(color, setting?.path)}
+              />
+            </FormControl>
+          )}
+          {setting.type === 'input' && (
+            <FormControl>
+              <label>{setting.name}</label>
+              <Input
+                defaultValue={deepFind(advancedValues, setting?.path)}
+                onChange={(e) => handleUpdateThemeValue(e.target.value, setting?.path)}
+                placeholder={setting.name}
+              />
+            </FormControl>
+          )}
+        </React.Fragment>
+      ))}
+    </>
+  )
+}