ordering-ui-admin-external 1.17.0 → 1.19.0

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

@@ -136,7 +136,7 @@ const EnterprisePromotionListingUI = (props) => {
             sitesState={sitesState}
             businessesList={businessesList}
             paymethodsState={paymethodsState}
-            promotion={selectedPromotion}
+            promotion={selectedPromotion || {}}
             promotionId={curPromotionId}
             promotionsList={promotionListState.promotions}
             handleSuccessUpdatePromotions={handleSuccessUpdatePromotions}

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

@@ -207,7 +207,7 @@ const MessagesListingUI = (props) => {
           open={isOpenOrderDetail}
           order={detailsOrder}
           orderId={orderDetailId}
-          driversList={driversList}
+          drivers={driversList.drivers}
           onClose={() => setIsOpenOrderDetail(false)}
         />
       )}

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

@@ -0,0 +1,102 @@
+import React, { useMemo, useState, useEffect } from 'react'
+import { useLanguage } from 'ordering-components-admin-external'
+
+import {
+  DropShadowWrapper,
+  ShadowInfoWrapper,
+  DropShadow,
+  ShadowInputGroup,
+  ShadowInputControl
+} from './styles'
+
+export const ButtonShadow = (props) => {
+  const { initialValues, handleUpdateThemeValue, path } = props
+
+  const [, t] = useLanguage()
+  const [shadow, setShadow] = useState({})
+
+  const shadowValues = useMemo(() => {
+    if (!shadow?.x || !shadow?.y || !shadow?.blur || !shadow?.spread) return ''
+    return `${shadow?.x}px ${shadow?.y}px ${shadow?.blur}px ${shadow?.spread}px ${shadow?.color}`
+  }, [shadow])
+
+  const handleChangeInput = (value, name) => {
+    handleUpdateThemeValue(value, [path, name].join('.'))
+    setShadow({ ...shadow, [name]: value })
+  }
+
+  useEffect(() => {
+    if (!initialValues) return
+    setShadow(JSON.parse(JSON.stringify(initialValues)))
+  }, [initialValues])
+
+  return (
+    <DropShadowWrapper>
+      <ShadowInfoWrapper>
+        <DropShadow
+          style={{
+            boxShadow: shadowValues
+          }}
+        />
+        <span>{t('DROP_SHADOW', 'Drop shadow')}</span>
+      </ShadowInfoWrapper>
+      <ShadowInputGroup>
+        <ShadowInputControl>
+          <span>X</span>
+          <input
+            value={shadow?.x || ''}
+            onKeyPress={(e) => {
+              if (!/^[0-9]$/.test(e.key)) {
+                e.preventDefault()
+              }
+            }}
+            onChange={(e) => handleChangeInput(e.target.value, 'x')}
+          />
+        </ShadowInputControl>
+        <ShadowInputControl>
+          <span>Y</span>
+          <input
+            value={shadow?.y || ''}
+            onChange={(e) => handleChangeInput(e.target.value, 'y')}
+            onKeyPress={(e) => {
+              if (!/^[0-9]$/.test(e.key)) {
+                e.preventDefault()
+              }
+            }}
+          />
+        </ShadowInputControl>
+        <ShadowInputControl>
+          <span>B</span>
+          <input
+            value={shadow?.blur || ''}
+            onChange={(e) => handleChangeInput(e.target.value, 'blur')}
+            onKeyPress={(e) => {
+              if (!/^[0-9]$/.test(e.key)) {
+                e.preventDefault()
+              }
+            }}
+          />
+        </ShadowInputControl>
+        <ShadowInputControl>
+          <span>S</span>
+          <input
+            value={shadow?.spread || ''}
+            onChange={(e) => handleChangeInput(e.target.value, 'spread')}
+            onKeyPress={(e) => {
+              if (!/^[0-9]$/.test(e.key)) {
+                e.preventDefault()
+              }
+            }}
+          />
+        </ShadowInputControl>
+        <ShadowInputControl>
+          <span>C</span>
+          <input
+            value={shadow?.color || ''}
+            onChange={(e) => handleChangeInput(e.target.value, 'color')}
+          />
+        </ShadowInputControl>
+      </ShadowInputGroup>
+    </DropShadowWrapper>
+  )
+}

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

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { useEffect, useState } from 'react'
 import { useLanguage } from 'ordering-components-admin-external'
 import { RecordCircleFill, Circle } from 'react-bootstrap-icons'
 import { Select } from '../../../styles/Select/FirstSelect'
@@ -14,6 +14,9 @@ export const FontStyleGroup = (props) => {
   const { isBody, fonts, path, handleUpdateThemeValue } = props
   const [, t] = useLanguage()
 
+  const [weights, setWeights] = useState([])
+  const [font, setFont] = useState('Poppins')
+
   const fontFamilyList = [
     { value: 'Poppins', content: <Option>{t('POPPINS', 'Poppins')}</Option> },
     { value: 'Lobster', content: <Option>{t('LOBSTER', 'Lobster')}</Option> },
@@ -32,6 +35,21 @@ export const FontStyleGroup = (props) => {
     { value: 900, name: '900 - Black (Heavy)' }
   ]
 
+  const handleChangeWeights = (value) => {
+    handleUpdateThemeValue([value], [path, 'weights'].join('.'))
+    setWeights([value])
+  }
+
+  const handleUpdateFont = (value) => {
+    handleUpdateThemeValue(value, [path, 'name'].join('.'))
+    setFont(value)
+  }
+
+  useEffect(() => {
+    setWeights(fonts?.weights)
+    setFont(fonts?.name)
+  }, [JSON.stringify(fonts)])
+
   return (
     <>
       <FormControl>
@@ -40,9 +58,9 @@ export const FontStyleGroup = (props) => {
           <Select
             options={fontFamilyList}
             className='select'
-            defaultValue={fonts?.name}
+            defaultValue={font}
             placeholder={t('SELECT_OPTION', 'Select an option')}
-            onChange={(value) => handleUpdateThemeValue(value, [path, 'name'].join('.'))}
+            onChange={(value) => handleUpdateFont(value)}
           />
         </SelectWrapper>
       </FormControl>
@@ -52,8 +70,8 @@ export const FontStyleGroup = (props) => {
         </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 />}
+            <FontWeightItem key={weight.value} onClick={() => handleChangeWeights(weight?.value)}>
+              {weights?.includes(weight.value) ? <RecordCircleFill className='active' /> : <Circle />}
               <span>{weight.name}</span>
             </FontWeightItem>
           ))}

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

@@ -0,0 +1,33 @@
+import React, { useState, useEffect } from 'react'
+import { useLanguage } from 'ordering-components-admin-external'
+import {
+  CheckSquareFill as CheckedIcon,
+  Square as UnCheckedIcon
+} from 'react-bootstrap-icons'
+import { FormControl, HideCheckWrapper } from './styles'
+
+export const HideCheckBox = (props) => {
+  const { handleUpdateThemeValue, setting, initialCheck, noLabel } = props
+  const [isCheck, setIsCheck] = useState(false)
+
+  const [, t] = useLanguage()
+
+  const handleClick = () => {
+    handleUpdateThemeValue(!isCheck, setting?.path)
+    setIsCheck(!isCheck)
+  }
+
+  useEffect(() => {
+    setIsCheck(initialCheck)
+  }, [initialCheck])
+
+  return (
+    <FormControl>
+      {!noLabel && (<label>{setting.name}</label>)}
+      <HideCheckWrapper onClick={() => handleClick()}>
+        {isCheck ? <CheckedIcon className='active' /> : <UnCheckedIcon />}
+        <span>{noLabel ? setting.name : t('HIDDEN', 'Hidden')} </span>
+      </HideCheckWrapper>
+    </FormControl>
+  )
+}

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

@@ -1,4 +1,4 @@
-import React, { useRef, useState } from 'react'
+import React, { useEffect, 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'
@@ -18,9 +18,11 @@ export const ImageBox = (props) => {
   const imageRef = useRef()
   const [alertState, setAlertState] = useState({ open: false, content: [] })
   const [cropState, setCropState] = useState({ name: null, data: null, open: false })
+  const [picture, setPicture] = useState('')
 
   const handleChangeImage = (croppedImg) => {
     handleChangePhoto(croppedImg, path)
+    setPicture(croppedImg)
     setCropState({ name: null, data: null, open: false })
   }
 
@@ -58,6 +60,11 @@ export const ImageBox = (props) => {
     })
   }
 
+  useEffect(() => {
+    if (!photo) return
+    setPicture(photo)
+  }, [photo])
+
   return (
     <div>
       <ImageBoxContainer isBig={isBig} onClick={() => imageRef.current.click()}>
@@ -70,8 +77,8 @@ export const ImageBox = (props) => {
             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}>
+            {picture && <img src={picture} alt='logo image' loading='lazy' />}
+            <UploadImageIconContainer bgimage={picture}>
               <UploadImageIcon>
                 <DumyPhoto />
                 <span>{t('DRAG_AND_DROP', 'Drag and drop')}</span>

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

@@ -1,22 +1,18 @@
 import React from 'react'
 import { useLanguage } from 'ordering-components-admin-external'
 import { Select } from '../../../styles/Select/FirstSelect'
+import { ColorPicker } from '../../Shared'
+import { Input } from '../../../styles'
+import { HideCheckBox } from './HideCheckBox'
 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 { settingList, handleUpdateThemeValue, advancedValues, themeStructure, noLabel } = props
 
   const [, t] = useLanguage()
 
@@ -47,13 +43,12 @@ export const SettingComponent = (props) => {
       {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>
+            <HideCheckBox
+              handleUpdateThemeValue={handleUpdateThemeValue}
+              setting={setting}
+              initialCheck={deepFind(advancedValues, setting?.path)}
+              noLabel={noLabel}
+            />
           )}
           {setting.type === 'position' && (
             <FormControl>