ordering-ui-admin-external 1.40.6 → 1.40.7

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

@@ -1,66 +1,179 @@
-import React from 'react'
+import React, { useState, useEffect } from 'react'
 import { useLanguage, CheckoutFieldsSetting as CheckoutFieldsSettingController } from 'ordering-components-admin-external'
-import { Switch } from '../../../styles'
+import { useHistory, useLocation } from 'react-router-dom'
+import { IconButton, Switch } from '../../../styles'
 import Skeleton from 'react-loading-skeleton'
+import { useWindowSize } from '../../../hooks/useWindowSize'
+import BsChevronRight from '@meronex/icons/bs/BsChevronRight'
+import { ArrowsAngleContract, ArrowsAngleExpand } from 'react-bootstrap-icons'
+import { SideBar, Alert } from '../../Shared'
 
 import {
   CheckoutFieldsDetailsContainer,
-  FieldContainer
+  FieldContainer,
+  SitesListContainer,
+  Header,
+  SitesWrapper,
+  SiteItem
 } from './styles'
 
 const CheckoutFieldsSettingUI = (props) => {
   const {
     checkoutFieldsState,
-    handleChangeCheckoutFieldSetting
+    handleChangeCheckoutFieldSetting,
+    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 = ['name', 'middle_name', 'lastname', 'second_lastname', 'email', 'mobile_phone', 'city_dropdown_option', 'address', 'zipcode', 'address_notes', 'coupon', 'driver_tip', 'comments', 'birthdate']
+
+  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 (
     <>
-      <CheckoutFieldsDetailsContainer>
-        <h1>{t('CHECKOUT_CUSTOMER_FIELDS', 'Checkout and Customer 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>
-        {checkoutFieldsState?.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('CHECKOUT_CUSTOMER_FIELDS', 'Checkout and Customer 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>
         ) : (
-          <>
-            {checkoutFieldsState.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) => handleChangeCheckoutFieldSetting(field.id, { required: val })}
-                  />
-                </div>
-                <div className='status'>
-                  <Switch
-                    defaultChecked={field.enabled}
-                    disabled={field.code === 'email'}
-                    onChange={(val) => handleChangeCheckoutFieldSetting(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>
         )}
-      </CheckoutFieldsDetailsContainer>
+      </SitesListContainer>
+      {selectedSiteId && (
+        <SideBar
+          isBorderShow
+          open={selectedSiteId}
+          onClose={() => handleCloseDetails()}
+        >
+          <CheckoutFieldsDetailsContainer>
+            <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>
+              ))
+            ) : (
+              <>
+                {checkoutFieldsState.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) => handleChangeCheckoutFieldSetting(field.validation_field_id, selectedSiteId, { required: val })}
+                        />
+                      </div>
+                      <div className='status'>
+                        <Switch
+                          defaultChecked={field.enabled}
+                          disabled={field?.validation_field?.code === 'email'}
+                          onChange={(val) => handleChangeCheckoutFieldSetting(field.validation_field_id, selectedSiteId, { enabled: val })}
+                        />
+                      </div>
+                    </FieldContainer>
+                  ))}
+              </>
+            )}
+          </CheckoutFieldsDetailsContainer>
+        </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}
+      />
     </>
   )
 }

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

@@ -1,5 +1,69 @@
 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 CheckoutFieldsDetailsContainer = styled.div`
   padding: 26px 15px;
   box-sizing: border-box;

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

@@ -62,6 +62,7 @@ const GuestCheckoutFieldsSettingUI = (props) => {
           <div className='name'>{t('FIELD', 'Field')}</div>
           <div className='required'>{t('REQUIRED', 'Required')}</div>
           <div className='status'>{t('STATE', 'Status')}</div>
+          <div className='guest'>{t('REQUIRED_WITH_GUEST', 'Required with guest')}</div>
         </FieldContainer>
         {checkoutFieldsState?.loading ? (
           [...Array(10).keys()].map(i => (
@@ -73,6 +74,9 @@ const GuestCheckoutFieldsSettingUI = (props) => {
               <div className='status'>
                 <Skeleton width={30} style={{ borderRadius: 20 }} />
               </div>
+              <div className='guest'>
+                <Skeleton width={30} style={{ borderRadius: 20 }} />
+              </div>
             </FieldContainer>
           ))
         ) : (
@@ -99,6 +103,12 @@ const GuestCheckoutFieldsSettingUI = (props) => {
                       onChange={(val) => handleChangeCheckoutFieldSetting(field?.validation_field_id, field?.order_type_id, { enabled: val })}
                     />
                   </div>
+                  <div className='guest'>
+                    <Switch
+                      defaultChecked={field?.required_with_guest}
+                      onChange={(val) => handleChangeCheckoutFieldSetting(field?.validation_field_id, field?.order_type_id, { required_with_guest: val })}
+                    />
+                  </div>
                 </FieldContainer>
               ))}
           </>

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

@@ -92,6 +92,13 @@ export const FieldContainer = styled.div`
     justify-content: center;
     align-items: center;
   }
+
+  .guest {
+    width: 80px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
 `
 
 export const TitleWrapper = styled.div`

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

@@ -47,6 +47,9 @@ const SettingsUI = (props) => {
   const [isOpenSettingDetails, setIsOpenSettingDetails] = useState(null)
   const [openSitesAuthSettings, setOpenSitesAuthSettings] = useState(false)
   const [openMultiCountrySettings, setOpenMultiCountrySettings] = useState(false)
+  const [openCheckoutSettings, setOpenCheckoutSettings] = useState(false)
+  const [openAddressSettings, setOpenAddressSettings] = useState(false)
+  const [openCardSettings, setOpenCardSettings] = useState(false)
   const [moveDistance, setMoveDistance] = useState(0)
 
   const [events] = useEvent()
@@ -74,6 +77,9 @@ const SettingsUI = (props) => {
     setIsOpenSettingDetails(null)
     setOpenSitesAuthSettings(false)
     setOpenMultiCountrySettings(false)
+    setOpenCheckoutSettings(false)
+    setOpenAddressSettings(false)
+    setOpenCardSettings(false)
     setIsOpenDescription(true)
     setSelectedCategory(category)
     handChangeConfig && handChangeConfig(false)
@@ -85,7 +91,10 @@ const SettingsUI = (props) => {
   const handleOpenSettingDetails = (item, isInitialRender) => {
     setIsOpenDescription(false)
     setOpenSitesAuthSettings(false)
+    setOpenCheckoutSettings(false)
     setOpenMultiCountrySettings(false)
+    setOpenCardSettings(false)
+    setOpenAddressSettings(false)
     setSelectedCategory(null)
     setIsOpenSettingDetails(item)
     if (!isInitialRender) {
@@ -111,13 +120,52 @@ const SettingsUI = (props) => {
     }
   }
 
+  const handleOpenCheckout = (isInitialRender) => {
+    setIsOpenDescription(false)
+    setIsOpenSettingDetails(null)
+    setOpenSitesAuthSettings(false)
+    setOpenAddressSettings(false)
+    setOpenCardSettings(false)
+    setOpenCheckoutSettings(true)
+    if (!isInitialRender) {
+      history.replace(`${location.pathname}?category=checkout`)
+    }
+  }
+
+  const handleOpenAddress = (isInitialRender) => {
+    setIsOpenDescription(false)
+    setIsOpenSettingDetails(null)
+    setOpenSitesAuthSettings(false)
+    setOpenCheckoutSettings(false)
+    setOpenCardSettings(false)
+    setOpenAddressSettings(true)
+    if (!isInitialRender) {
+      history.replace(`${location.pathname}?category=address`)
+    }
+  }
+
+  const handleOpenCard = (isInitialRender) => {
+    setIsOpenDescription(false)
+    setIsOpenSettingDetails(null)
+    setOpenSitesAuthSettings(false)
+    setOpenCheckoutSettings(false)
+    setOpenAddressSettings(false)
+    setOpenCardSettings(true)
+    if (!isInitialRender) {
+      history.replace(`${location.pathname}?category=card`)
+    }
+  }
+
   const handleBackRedirect = () => {
     setIsOpenDescription(false)
     setSelectedCategory(null)
     setIsOpenSettingDetails(null)
     setMoveDistance(0)
     setOpenMultiCountrySettings(false)
+    setOpenCheckoutSettings(false)
     setOpenSitesAuthSettings(false)
+    setOpenAddressSettings(false)
+    setOpenCardSettings(false)
     history.replace(`${location.pathname}`)
   }
 
@@ -130,6 +178,12 @@ const SettingsUI = (props) => {
           handleOpenSites(true)
         } else if (categoryId === 'multi_country') {
           handleOpenMultiCountry(true)
+        } else if (categoryId === 'checkout') {
+          setOpenCheckoutSettings(true)
+        } else if (categoryId === 'address') {
+          setOpenAddressSettings(true)
+        } else if (categoryId === 'card') {
+          setOpenCardSettings(true)
         } else {
           handleOpenSettingDetails(categoryId, true)
         }
@@ -190,13 +244,13 @@ const SettingsUI = (props) => {
               </SettingItemWrapper>
               <SettingItemWrapper
                 className='col-md-4 col-sm-6'
-                onClick={() => handleOpenSettingDetails('checkout')}
+                onClick={() => handleOpenCheckout()}
               >
                 <SettingItemUI
                   title={t('CHECKOUT_FIELDS', 'Checkout fields')}
                   description={t('CHECKOUT_FIELDS_DESC')}
                   icon={<CheckCircleFill />}
-                  active={isOpenSettingDetails === 'checkout'}
+                  active={openCheckoutSettings}
                 />
               </SettingItemWrapper>
               <SettingItemWrapper
@@ -212,24 +266,24 @@ const SettingsUI = (props) => {
               </SettingItemWrapper>
               <SettingItemWrapper
                 className='col-md-4 col-sm-6'
-                onClick={() => handleOpenSettingDetails('address')}
+                onClick={() => handleOpenAddress()}
               >
                 <SettingItemUI
                   title={t('ADDRESS_FIELDS', 'Address fields')}
                   description={t('ADDRESS_FIELDS_DESC')}
                   icon={<GeoAltFill />}
-                  active={isOpenSettingDetails === 'address'}
+                  active={openAddressSettings}
                 />
               </SettingItemWrapper>
               <SettingItemWrapper
                 className='col-md-4 col-sm-6'
-                onClick={() => handleOpenSettingDetails('card')}
+                onClick={() => handleOpenCard()}
               >
                 <SettingItemUI
                   title={t('CARD_FIELDS', 'Card fields')}
                   description={t('CARD_FIELDS_DESC', 'Manage your card fields')}
                   icon={<CreditCard />}
-                  active={isOpenSettingDetails === 'card'}
+                  active={openCardSettings}
                 />
               </SettingItemWrapper>
               <SettingItemWrapper
@@ -324,6 +378,36 @@ const SettingsUI = (props) => {
           <MultiCountrySettings setMoveDistance={setMoveDistance} />
         </SideBar>
       )}
+      {openCheckoutSettings && (
+        <SideBar
+          defaultSideBarWidth={500 + moveDistance}
+          moveDistance={moveDistance}
+          open={openCheckoutSettings}
+          onClose={() => handleBackRedirect()}
+        >
+          <CheckoutFieldsSetting setMoveDistance={setMoveDistance} />
+        </SideBar>
+      )}
+      {openAddressSettings && (
+        <SideBar
+          defaultSideBarWidth={500 + moveDistance}
+          moveDistance={moveDistance}
+          open={openAddressSettings}
+          onClose={() => handleBackRedirect()}
+        >
+          <AddressFieldsSetting setMoveDistance={setMoveDistance} />
+        </SideBar>
+      )}
+      {openCardSettings && (
+        <SideBar
+          defaultSideBarWidth={500 + moveDistance}
+          moveDistance={moveDistance}
+          open={openCardSettings}
+          onClose={() => handleBackRedirect()}
+        >
+          <CardFieldsSetting setMoveDistance={setMoveDistance} />
+        </SideBar>
+      )}
       {
         isOpenSettingDetails && (
           <SideBar
@@ -333,18 +417,9 @@ const SettingsUI = (props) => {
             onClose={() => handleBackRedirect()}
             showExpandIcon
           >
-            {isOpenSettingDetails === 'checkout' && (
-              <CheckoutFieldsSetting />
-            )}
             {isOpenSettingDetails === 'guest_checkout' && (
               <GuestCheckoutFieldsSetting />
             )}
-            {isOpenSettingDetails === 'address' && (
-              <AddressFieldsSetting />
-            )}
-            {isOpenSettingDetails === 'card' && (
-              <CardFieldsSetting />
-            )}
             {isOpenSettingDetails === 'language' && (
               <LanguageSetting />
             )}