ordering-ui-admin-external 1.40.5 → 1.40.7

package/src/components/Settings/AddressFieldsSetting/index.js

@@ -1,72 +1,186 @@
-import React from 'react'
+import React, { useState, useEffect } from 'react'
 import { useLanguage, AddressFieldsSetting as AddressFieldsSettingController } from 'ordering-components-admin-external'
-import { Switch } from '../../../styles'
+import { useHistory, useLocation } from 'react-router-dom'
+import { Switch, IconButton } from '../../../styles'
 import Skeleton from 'react-loading-skeleton'
+import { SideBar, Alert } from '../../Shared'
+import { useWindowSize } from '../../../hooks/useWindowSize'
+import BsChevronRight from '@meronex/icons/bs/BsChevronRight'
+import { ArrowsAngleContract, ArrowsAngleExpand } from 'react-bootstrap-icons'
 
 import {
   AddressFieldsDetailsContainer,
-  FieldContainer
+  FieldContainer,
+  SitesListContainer,
+  Header,
+  SitesWrapper,
+  SiteItem
 } from './styles'
 
 const AddressFieldsSettingUI = (props) => {
   const {
-    addressFieldsState,
-    handleChangeFieldSetting
+    validationFieldState,
+    handleChangeFieldSetting,
+    sitesState,
+    setMoveDistance,
+    selectedSiteId,
+    setSelectedSiteId,
+    actionState
   } = props
 
   const [, t] = useLanguage()
+  const { width } = useWindowSize()
+  const history = useHistory()
+  const [alertState, setAlertState] = useState({ open: false, content: [] })
+  const query = new URLSearchParams(useLocation().search)
+
+  const [isExpand, setIsExpand] = useState(false)
+
+  const orderValidationFields = ['address', 'address_note', 'internal_number', 'zipcode']
+
+  const handleOpenSiteSettingDetails = (siteId, isInitialRender) => {
+    // handleGetSiteConfigs(siteId)
+    setSelectedSiteId(siteId)
+    setMoveDistance(500)
+    if (!isInitialRender) {
+      const category = query.get('category')
+      history.replace(`${location.pathname}?category=${category}&site=${siteId}`)
+    }
+  }
+
+  const expandSideBar = () => {
+    const element = document.getElementById('sideSlider')
+    if (isExpand) element.style.width = '500px'
+    else element.style.width = '100vw'
+    setIsExpand(prev => !prev)
+  }
+
+  const handleCloseDetails = () => {
+    setSelectedSiteId(null)
+    setMoveDistance(0)
+    const category = query.get('category')
+    history.replace(`${location.pathname}?category=${category}`)
+  }
+
+  useEffect(() => {
+    if (!actionState?.error) return
+    setAlertState({
+      open: true,
+      content: actionState?.error
+    })
+  }, [actionState?.error])
 
   return (
     <>
-      <AddressFieldsDetailsContainer>
-        <h1>{t('ADDRESS_FIELDS', 'Address fields')}</h1>
-        <FieldContainer isHeader>
-          <div className='name'>{t('FIELD', 'Field')}</div>
-          <div className='required'>{t('REQUIRED', 'Required')}</div>
-          <div className='status'>{t('STATE', 'Status')}</div>
-        </FieldContainer>
-        {addressFieldsState?.loading ? (
-          [...Array(10).keys()].map(i => (
-            <FieldContainer key={i}>
-              <div className='name'><Skeleton width={120} /></div>
-              <div className='required'>
-                <Skeleton width={30} style={{ borderRadius: 20 }} />
-              </div>
-              <div className='status'>
-                <Skeleton width={30} style={{ borderRadius: 20 }} />
-              </div>
-            </FieldContainer>
-          ))
+      <SitesListContainer>
+        <Header>
+          <h1>{t('ADDRESS_FIELDS', 'Address fields')}</h1>
+          {width > 576 && !selectedSiteId && (
+            <IconButton
+              color='black'
+              onClick={expandSideBar}
+            >
+              {isExpand ? <ArrowsAngleContract /> : <ArrowsAngleExpand />}
+            </IconButton>
+          )}
+        </Header>
+        {sitesState.loading ? (
+          <SitesWrapper>
+            {[...Array(5).keys()].map(i => (
+              <SiteItem key={i}>
+                <Skeleton width={100} height={14} />
+              </SiteItem>
+            ))}
+          </SitesWrapper>
         ) : (
-          <>
-            {addressFieldsState.fields.map(field => (
-              <FieldContainer key={field.id}>
-                <div className='name'>{t(field.code.toUpperCase())}</div>
-                <div className='required'>
-                  <Switch
-                    defaultChecked={field.required}
-                    disabled={field.code === 'email'}
-                    onChange={(val) => handleChangeFieldSetting(field.id, { required: val })}
-                  />
-                </div>
-                <div className='status'>
-                  <Switch
-                    defaultChecked={field.enabled}
-                    disabled={field.code === 'email'}
-                    onChange={(val) => handleChangeFieldSetting(field.id, { enabled: val })}
-                  />
-                </div>
-              </FieldContainer>
+          <SitesWrapper>
+            {sitesState.sites.map(site => (
+              <SiteItem
+                key={site.id}
+                active={site.id === selectedSiteId}
+                onClick={() => handleOpenSiteSettingDetails(site.id)}
+              >
+                <span>{site.name}</span>
+                <BsChevronRight />
+              </SiteItem>
             ))}
-          </>
+          </SitesWrapper>
         )}
-      </AddressFieldsDetailsContainer>
+      </SitesListContainer>
+      {selectedSiteId && (
+        <SideBar
+          isBorderShow
+          open={selectedSiteId}
+          onClose={() => handleCloseDetails()}
+        >
+          <AddressFieldsDetailsContainer>
+            <h1>{t('SETTINGS', 'Settings')}</h1>
+            <FieldContainer isHeader>
+              <div className='name'>{t('FIELD', 'Field')}</div>
+              <div className='required'>{t('REQUIRED', 'Required')}</div>
+              <div className='status'>{t('STATE', 'Status')}</div>
+            </FieldContainer>
+            {(actionState?.loading && actionState?.isPost) ? (
+              [...Array(10).keys()].map(i => (
+                <FieldContainer key={i}>
+                  <div className='name'><Skeleton width={120} /></div>
+                  <div className='required'>
+                    <Skeleton width={30} style={{ borderRadius: 20 }} />
+                  </div>
+                  <div className='status'>
+                    <Skeleton width={30} style={{ borderRadius: 20 }} />
+                  </div>
+                </FieldContainer>
+              ))
+            ) : (
+              <>
+                {validationFieldState.fields
+                  .filter(item => item?.site_id === parseInt(selectedSiteId))
+                  .sort((a, b) => {
+                    const indexA = orderValidationFields.indexOf(a?.validation_field.code)
+                    const indexB = orderValidationFields.indexOf(b?.validation_field.code)
+                    return indexA - indexB
+                  })
+                  .map(field => (
+                    <FieldContainer key={field.id}>
+                      <div className='name'>{t(field?.validation_field?.code.toUpperCase())}</div>
+                      <div className='required'>
+                        <Switch
+                          defaultChecked={field.required}
+                          disabled={field?.validation_field?.code === 'email'}
+                          onChange={(val) => handleChangeFieldSetting(field.validation_field_id, selectedSiteId, { required: val })}
+                        />
+                      </div>
+                      <div className='status'>
+                        <Switch
+                          defaultChecked={field.enabled}
+                          disabled={field?.validation_field?.code === 'email'}
+                          onChange={(val) => handleChangeFieldSetting(field.validation_field_id, selectedSiteId, { enabled: val })}
+                        />
+                      </div>
+                    </FieldContainer>
+                  ))}
+              </>
+            )}
+          </AddressFieldsDetailsContainer>
+        </SideBar>
+      )}
+      <Alert
+        title={t('WEB_APPNAME', 'Ordering')}
+        content={alertState.content}
+        acceptText={t('ACCEPT', 'Accept')}
+        open={alertState.open}
+        onClose={() => setAlertState({ open: false, content: [] })}
+        onAccept={() => setAlertState({ open: false, content: [] })}
+        closeOnBackdrop={false}
+      />
     </>
   )
 }
 export const AddressFieldsSetting = (props) => {
   const addressFieldsProps = {
     ...props,
+    code: 'address',
     UIComponent: AddressFieldsSettingUI
   }
   return <AddressFieldsSettingController {...addressFieldsProps} />

package/src/components/Settings/AddressFieldsSetting/styles.js

@@ -1,5 +1,65 @@
 import styled, { css } from 'styled-components'
 
+export const SitesListContainer = styled.div`
+  padding: 20px;
+  box-sizing: border-box;
+  width: 100%;
+  overflow-x: hidden;
+`
+
+export const Header = styled.div`
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  h1 {
+    font-weight: 700;
+    font-size: 20px;
+    margin: 0;
+  }
+  margin-right: 35px;
+  ${props => props.theme.rtl && css`
+    margin-left: 35px;
+    margin-right: 0;
+  `}
+`
+
+export const SitesWrapper = styled.div`
+  margin-top: 35px;
+  border: 1px solid ${props => props.theme.colors.borderColor};
+  border-radius: 8px;
+  overflow: hidden;
+  > div:first-child {
+    border-top: none !important;
+  }
+  > div:last-child {
+    border-bottom: none !important;
+  } 
+`
+export const SiteItem = styled.div`
+  cursor: pointer;
+  padding: 12px 15px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  color: ${props => props.theme.colors.lightGray};
+  border-bottom: 1px solid ${props => props.theme.colors.borderColor};
+  &:hover {
+    background-color: ${props => props.theme.colors.lightPrimary};
+  }
+  span {
+    font-size: 14px;
+  }
+  svg {
+    font-size: 20px;
+  }
+  ${({ active }) => active && css`
+    color: ${props => props.theme.colors.headingColor};
+    border-top: 1px solid ${props => props.theme.colors.primary};
+    border-bottom: 1px solid ${props => props.theme.colors.primary} !important;
+    background-color: ${props => props.theme.colors.lightPrimary};
+  `}
+`
+
 export const AddressFieldsDetailsContainer = styled.div`
   padding: 26px 40px;
   box-sizing: border-box;

package/src/components/Settings/CardFieldsSetting/index.js

@@ -1,72 +1,187 @@
-import React from 'react'
-import { useLanguage, CardFieldsSetting as CardFieldsSettingController } from 'ordering-components-admin-external'
-import { Switch } from '../../../styles'
+import React, { useState, useEffect } from 'react'
+import { useLanguage, AddressFieldsSetting as AddressFieldsSettingController } from 'ordering-components-admin-external'
+import { useHistory, useLocation } from 'react-router-dom'
+import { Switch, IconButton } from '../../../styles'
 import Skeleton from 'react-loading-skeleton'
+import { SideBar, Alert } from '../../Shared'
+import { useWindowSize } from '../../../hooks/useWindowSize'
+import BsChevronRight from '@meronex/icons/bs/BsChevronRight'
+import { ArrowsAngleContract, ArrowsAngleExpand } from 'react-bootstrap-icons'
 
 import {
   CardFieldsDetailsContainer,
-  FieldContainer
+  FieldContainer,
+  SitesListContainer,
+  Header,
+  SitesWrapper,
+  SiteItem
 } from './styles'
 
 const CardFieldsSettingUI = (props) => {
   const {
-    cardFieldsState,
-    handleChangeFieldSetting
+    validationFieldState,
+    handleChangeFieldSetting,
+    sitesState,
+    setMoveDistance,
+    selectedSiteId,
+    setSelectedSiteId,
+    actionState
   } = props
 
   const [, t] = useLanguage()
+  const { width } = useWindowSize()
+  const history = useHistory()
+  const [alertState, setAlertState] = useState({ open: false, content: [] })
+  const query = new URLSearchParams(useLocation().search)
+
+  const [isExpand, setIsExpand] = useState(false)
+
+  const orderValidationFields = ['address', 'address_note', 'internal_number', 'zipcode']
+
+  const handleOpenSiteSettingDetails = (siteId, isInitialRender) => {
+    // handleGetSiteConfigs(siteId)
+    setSelectedSiteId(siteId)
+    setMoveDistance(500)
+    if (!isInitialRender) {
+      const category = query.get('category')
+      history.replace(`${location.pathname}?category=${category}&site=${siteId}`)
+    }
+  }
+
+  const expandSideBar = () => {
+    const element = document.getElementById('sideSlider')
+    if (isExpand) element.style.width = '500px'
+    else element.style.width = '100vw'
+    setIsExpand(prev => !prev)
+  }
+
+  const handleCloseDetails = () => {
+    setSelectedSiteId(null)
+    setMoveDistance(0)
+    const category = query.get('category')
+    history.replace(`${location.pathname}?category=${category}`)
+  }
+
+  useEffect(() => {
+    if (!actionState?.error) return
+    setAlertState({
+      open: true,
+      content: actionState?.error
+    })
+  }, [actionState?.error])
 
   return (
     <>
-      <CardFieldsDetailsContainer>
-        <h1>{t('CARD_FIELDS', 'Card fields')}</h1>
-        <FieldContainer isHeader>
-          <div className='name'>{t('FIELD', 'Field')}</div>
-          <div className='required'>{t('REQUIRED', 'Required')}</div>
-          <div className='status'>{t('STATE', 'Status')}</div>
-        </FieldContainer>
-        {cardFieldsState?.loading ? (
-          [...Array(10).keys()].map(i => (
-            <FieldContainer key={i}>
-              <div className='name'><Skeleton width={120} /></div>
-              <div className='required'>
-                <Skeleton width={30} style={{ borderRadius: 20 }} />
-              </div>
-              <div className='status'>
-                <Skeleton width={30} style={{ borderRadius: 20 }} />
-              </div>
-            </FieldContainer>
-          ))
+      <SitesListContainer>
+        <Header>
+          <h1>{t('CARD_FIELDS', 'Card fields')}</h1>
+          {width > 576 && !selectedSiteId && (
+            <IconButton
+              color='black'
+              onClick={expandSideBar}
+            >
+              {isExpand ? <ArrowsAngleContract /> : <ArrowsAngleExpand />}
+            </IconButton>
+          )}
+        </Header>
+        {sitesState.loading ? (
+          <SitesWrapper>
+            {[...Array(5).keys()].map(i => (
+              <SiteItem key={i}>
+                <Skeleton width={100} height={14} />
+              </SiteItem>
+            ))}
+          </SitesWrapper>
         ) : (
-          <>
-            {cardFieldsState.fields.map(field => (
-              <FieldContainer key={field.id}>
-                <div className='name'>{t(field.code.toUpperCase())}</div>
-                <div className='required'>
-                  <Switch
-                    defaultChecked={field.required}
-                    onChange={(val) => handleChangeFieldSetting(field.id, { required: val })}
-                  />
-                </div>
-                <div className='status'>
-                  <Switch
-                    defaultChecked={field.enabled}
-                    disabled={field.code === 'email'}
-                    onChange={(val) => handleChangeFieldSetting(field.id, { enabled: val })}
-                  />
-                </div>
-              </FieldContainer>
+          <SitesWrapper>
+            {sitesState.sites.map(site => (
+              <SiteItem
+                key={site.id}
+                active={site.id === selectedSiteId}
+                onClick={() => handleOpenSiteSettingDetails(site.id)}
+              >
+                <span>{site.name}</span>
+                <BsChevronRight />
+              </SiteItem>
             ))}
-          </>
+          </SitesWrapper>
         )}
-      </CardFieldsDetailsContainer>
+      </SitesListContainer>
+      {selectedSiteId && (
+        <SideBar
+          isBorderShow
+          open={selectedSiteId}
+          onClose={() => handleCloseDetails()}
+        >
+          <CardFieldsDetailsContainer>
+            <h1>{t('SETTINGS', 'Settings')}</h1>
+            <FieldContainer isHeader>
+              <div className='name'>{t('FIELD', 'Field')}</div>
+              <div className='required'>{t('REQUIRED', 'Required')}</div>
+              <div className='status'>{t('STATE', 'Status')}</div>
+            </FieldContainer>
+            {(actionState?.loading && actionState?.isPost) ? (
+              [...Array(10).keys()].map(i => (
+                <FieldContainer key={i}>
+                  <div className='name'><Skeleton width={120} /></div>
+                  <div className='required'>
+                    <Skeleton width={30} style={{ borderRadius: 20 }} />
+                  </div>
+                  <div className='status'>
+                    <Skeleton width={30} style={{ borderRadius: 20 }} />
+                  </div>
+                </FieldContainer>
+              ))
+            ) : (
+              <>
+                {validationFieldState.fields
+                  .filter(item => item?.site_id === parseInt(selectedSiteId))
+                  .sort((a, b) => {
+                    const indexA = orderValidationFields.indexOf(a?.validation_field.code)
+                    const indexB = orderValidationFields.indexOf(b?.validation_field.code)
+                    return indexA - indexB
+                  })
+                  .map(field => (
+                    <FieldContainer key={field.id}>
+                      <div className='name'>{t(field?.validation_field?.code.toUpperCase())}</div>
+                      <div className='required'>
+                        <Switch
+                          defaultChecked={field.required}
+                          disabled={field?.validation_field?.code === 'email'}
+                          onChange={(val) => handleChangeFieldSetting(field.validation_field_id, selectedSiteId, { required: val })}
+                        />
+                      </div>
+                      <div className='status'>
+                        <Switch
+                          defaultChecked={field.enabled}
+                          disabled={field?.validation_field?.code === 'email'}
+                          onChange={(val) => handleChangeFieldSetting(field.validation_field_id, selectedSiteId, { enabled: val })}
+                        />
+                      </div>
+                    </FieldContainer>
+                  ))}
+              </>
+            )}
+          </CardFieldsDetailsContainer>
+        </SideBar>
+      )}
+      <Alert
+        title={t('WEB_APPNAME', 'Ordering')}
+        content={alertState.content}
+        acceptText={t('ACCEPT', 'Accept')}
+        open={alertState.open}
+        onClose={() => setAlertState({ open: false, content: [] })}
+        onAccept={() => setAlertState({ open: false, content: [] })}
+        closeOnBackdrop={false}
+      />
     </>
   )
 }
 export const CardFieldsSetting = (props) => {
   const cardFieldsProps = {
     ...props,
+    code: 'card',
     UIComponent: CardFieldsSettingUI
   }
-  return <CardFieldsSettingController {...cardFieldsProps} />
+  return <AddressFieldsSettingController {...cardFieldsProps} />
 }

package/src/components/Settings/CardFieldsSetting/styles.js

@@ -1,5 +1,65 @@
 import styled, { css } from 'styled-components'
 
+export const SitesListContainer = styled.div`
+  padding: 20px;
+  box-sizing: border-box;
+  width: 100%;
+  overflow-x: hidden;
+`
+
+export const Header = styled.div`
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  h1 {
+    font-weight: 700;
+    font-size: 20px;
+    margin: 0;
+  }
+  margin-right: 35px;
+  ${props => props.theme.rtl && css`
+    margin-left: 35px;
+    margin-right: 0;
+  `}
+`
+
+export const SitesWrapper = styled.div`
+  margin-top: 35px;
+  border: 1px solid ${props => props.theme.colors.borderColor};
+  border-radius: 8px;
+  overflow: hidden;
+  > div:first-child {
+    border-top: none !important;
+  }
+  > div:last-child {
+    border-bottom: none !important;
+  } 
+`
+export const SiteItem = styled.div`
+  cursor: pointer;
+  padding: 12px 15px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  color: ${props => props.theme.colors.lightGray};
+  border-bottom: 1px solid ${props => props.theme.colors.borderColor};
+  &:hover {
+    background-color: ${props => props.theme.colors.lightPrimary};
+  }
+  span {
+    font-size: 14px;
+  }
+  svg {
+    font-size: 20px;
+  }
+  ${({ active }) => active && css`
+    color: ${props => props.theme.colors.headingColor};
+    border-top: 1px solid ${props => props.theme.colors.primary};
+    border-bottom: 1px solid ${props => props.theme.colors.primary} !important;
+    background-color: ${props => props.theme.colors.lightPrimary};
+  `}
+`
+
 export const CardFieldsDetailsContainer = styled.div`
   padding: 26px 40px;
   box-sizing: border-box;