ordering-ui-admin-external 1.5.1 → 1.6.1

package/src/components/Profile/ProfilePage/index.js

@@ -0,0 +1,81 @@
+import React from 'react'
+import {
+  UserDetails as UserDetailsController,
+  useLanguage,
+  useSession
+} from 'ordering-components-admin-external'
+import FaUserAlt from '@meronex/icons/fa/FaUserAlt'
+import { List as MenuIcon } from 'react-bootstrap-icons'
+import { IconButton, Button } from '../../../styles'
+import { useInfoShare } from '../../../contexts/InfoShareContext'
+
+import {
+  Container,
+  HeaderContainer,
+  UserInfoContainer,
+  UserImage,
+  UserInfoWrapper,
+  ButtonsGroup
+} from './styles'
+
+const ProfilePageUI = (props) => {
+  const {
+    handleGoogleAccountLink
+  } = props
+
+  const [, t] = useLanguage()
+  const [{ isCollapse }, { handleMenuCollapse }] = useInfoShare()
+  const [{ user }] = useSession()
+
+  return (
+    <Container>
+      <HeaderContainer>
+        {isCollapse && (
+          <IconButton
+            color='black'
+            onClick={() => handleMenuCollapse(false)}
+          >
+            <MenuIcon />
+          </IconButton>
+        )}
+        <h1>{t('PROFILE', '')}</h1>
+      </HeaderContainer>
+      <UserInfoContainer>
+        <UserImage>
+          {user?.photo ? (
+            <img src={user?.photo} loading='lazy' alt='' />
+          ) : (
+            <FaUserAlt />
+          )}
+        </UserImage>
+        <UserInfoWrapper>
+          <p className='name'>{user?.name} {user?.lastname}</p>
+          <p className='email'>{user?.email}</p>
+          {user?.cellphone && <p className='phone'>{user?.cellphone}</p>}
+          <ButtonsGroup>
+            {user?.level === 8 && (
+              <Button
+                color='primary'
+                borderRadius='8px'
+                outline
+                onClick={() => handleGoogleAccountLink()}
+              >
+                {t('GOOGLE_ACCOUNT', 'Google account')}
+              </Button>
+            )}
+          </ButtonsGroup>
+        </UserInfoWrapper>
+      </UserInfoContainer>
+    </Container>
+  )
+}
+
+export const ProfilePage = (props) => {
+  const [{ user }] = useSession()
+  const profileProps = {
+    ...props,
+    userId: user?.id,
+    UIComponent: ProfilePageUI
+  }
+  return <UserDetailsController {...profileProps} />
+}

package/src/components/Profile/ProfilePage/styles.js

@@ -0,0 +1,64 @@
+import styled from 'styled-components'
+
+export const Container = styled.div`
+  flex: 1;
+  padding: 20px;
+  box-sizing: border-box;
+  transition: all 0.5s;
+  max-height: 100vh;
+  overflow: auto;
+`
+export const HeaderContainer = styled.div`
+  display: flex;
+  align-items: center;
+  h1 {
+    font-size: 20px;
+    font-weight: 700;
+    margin: 0;
+  }
+`
+export const UserInfoContainer = styled.div`
+  padding-top: 30px;
+  display: flex;
+`
+export const UserImage = styled.div`
+  border-radius: 8px;
+  box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.1);
+  width: 216px;
+  height: 216px;
+  img {
+    width: 100%;
+    height: 100%;
+    object-fit: contain;
+    border-radius: 8px;
+  }
+`
+export const UserInfoWrapper = styled.div`
+  margin: 0 26px;
+  p {
+    &.name {
+      font-size: 20px;
+      font-weight: 600;
+      margin: 0;
+    }
+    &.email {
+      font-size: 14px;
+      line-height: 24px;
+      margin: 12px 0;
+    }
+    &.phone {
+      font-size: 14px;
+      line-height: 24px;
+      margin: 0;
+    }
+  }
+`
+export const ButtonsGroup = styled.div`
+  display: flex;
+  align-items: center;
+  margin-top: 26px;
+
+  button {
+    height: 44px;
+  }
+`

package/src/components/Profile/index.js

@@ -0,0 +1,5 @@
+import { ProfilePage } from './ProfilePage'
+
+export {
+  ProfilePage
+}

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

@@ -12,7 +12,8 @@ export const InsertLink = (props) => {
   const {
     editorContext,
     onClose,
-    handleRestoreEditor
+    handleRestoreEditor,
+    isLinkButton
   } = props
   const [, t] = useLanguage()
   const [changesState, setChangesState] = useState({})
@@ -27,12 +28,15 @@ export const InsertLink = (props) => {
   const handleInsertClick = () => {
     handleRestoreEditor()
     editorContext.invoke('editor.createLink', {
-      text: changesState?.text || '',
+      text: isLinkButton
+        ? `<button style='font-size: 9px;color: white;padding: 6px 11px; cursor: pointer; border-radius: 4px; background: #2C7BE5; border: none;'>${changesState?.text || 'button'}</button>`
+        : (changesState?.text || ''),
       url: changesState?.url || '',
       isNewWindow: changesState?.isNewWindow ?? true
     })
     onClose()
   }
+
   return (
     <InsertLinkContainer>
       <h1>{t('INSERT_LINK', 'Insert link')}</h1>

package/src/components/Shared/ColumnAllowSettingPopover/index.js

@@ -18,7 +18,8 @@ export const ColumnAllowSettingPopover = (props) => {
     optionsDefault,
     allowColumns,
     handleChangeAllowColumns,
-    title
+    title,
+    isOrder
   } = props
 
   const [open, setOpen] = useState(false)
@@ -92,14 +93,17 @@ export const ColumnAllowSettingPopover = (props) => {
           {optionsDefault.map(option => (
             <AllowItem
               key={option.value}
-              isChecked={allowColumns?.[option.value]?.visable}
+              isChecked={isOrder ? allowColumns?.[option.value]?.visable : allowColumns[option.value]}
               onClick={() => handleChangeAllowColumns(option.value)}
             >
-              {allowColumns?.[option.value]?.visable ? (
-                <RiCheckboxFill />
-              ) : (
-                <RiCheckboxBlankLine />
-              )}
+              {(isOrder
+                ? allowColumns?.[option.value]?.visable
+                : allowColumns[option.value])
+                ? (
+                  <RiCheckboxFill />
+                ) : (
+                  <RiCheckboxBlankLine />
+                )}
               <span>
                 {option.content}
               </span>

package/src/components/SidebarMenu/index.js

@@ -17,7 +17,9 @@ import {
   Award,
   BoxArrowUpRight,
   Cart3,
-  CloudDownload
+  Cash,
+  CloudDownload,
+  BagCheck
 } from 'react-bootstrap-icons'
 import { useTheme } from 'styled-components'
 import { useEvent, useLanguage, useSession, useConfig } from 'ordering-components-admin-external'
@@ -108,6 +110,33 @@ export const SidebarMenu = (props) => {
     }
   ]
 
+  const myProductMenus = [
+    {
+      id: 1,
+      title: t('ORDERING_WEBSITE', 'Ordering website'),
+      pageName: 'ordering_website',
+      url: '/my-products/ordering-website'
+    },
+    {
+      id: 2,
+      title: t('CUSTOMER_APP', 'Customer app'),
+      pageName: 'customer_app',
+      url: '/my-products/customer-app'
+    },
+    {
+      id: 3,
+      title: t('STORE_APP', 'Store app'),
+      pageName: 'store_app',
+      url: '/my-products/store-app'
+    },
+    {
+      id: 4,
+      title: t('DRIVER_APP', 'Driver app'),
+      pageName: 'driver_app',
+      url: '/my-products/driver-app'
+    }
+  ]
+
   const storesSubMenus = [
     {
       id: 1,
@@ -337,7 +366,7 @@ export const SidebarMenu = (props) => {
             <SidebarContent className='d-flex flex-column justify-content-between p-1 pt-0'>
               <div className='d-flex flex-column'>
                 <Accordion>
-                  {sessionState?.user?.level !== 5 && (
+                  {sessionState?.user?.level !== 5 && sessionState?.user?.level !== 8 && (
                     <MenuContainer>
                       <ContextAwareToggle
                         eventKey='0'
@@ -353,38 +382,41 @@ export const SidebarMenu = (props) => {
                     </MenuContainer>
                   )}
 
-                  <MenuContainer>
-                    <ContextAwareToggle
-                      eventKey='1'
-                      active={
-                        location.pathname === '/orders' ||
-                        location.pathname === '/deliveries' ||
-                        location.pathname === '/drivers' ||
-                        location.pathname === '/appointments'
-                      }
-                    >
-                      <ListCheck />
-                      <span>{t('ORDERS', 'Orders')}</span>
-                    </ContextAwareToggle>
-                    <Accordion.Collapse eventKey='1'>
-                      <MenuContent>
-                        {ordersSubMenus.map(item => (
-                          !(sessionState?.user?.level === 2 && item.pageName === 'drivers') &&
-                          !(sessionState?.user?.level === 5 && item.pageName === 'appointments') && (
-                            <SubMenu
-                              key={item.id}
-                              active={location.pathname.includes(item.pageName)}
-                              onClick={() => handleGoToPage({ page: item.pageName })}
-                            >
-                              {item.title}
-                            </SubMenu>
-                          )
-                        ))}
-                      </MenuContent>
-                    </Accordion.Collapse>
-                  </MenuContainer>
+                  {sessionState?.user?.level !== 8 && (
+                    <MenuContainer>
+                      <ContextAwareToggle
+                        eventKey='1'
+                        active={
+                          location.pathname === '/orders' ||
+                          location.pathname === '/deliveries' ||
+                          location.pathname === '/drivers' ||
+                          location.pathname === '/appointments' ||
+                          location.pathname === '/gift-cards'
+                        }
+                      >
+                        <ListCheck />
+                        <span>{t('ORDERS', 'Orders')}</span>
+                      </ContextAwareToggle>
+                      <Accordion.Collapse eventKey='1'>
+                        <MenuContent>
+                          {ordersSubMenus.map(item => (
+                            !(sessionState?.user?.level === 2 && item.pageName === 'drivers') &&
+                            !(sessionState?.user?.level === 5 && item.pageName === 'appointments') && (
+                              <SubMenu
+                                key={item.id}
+                                active={location.pathname.includes(item.url)}
+                                onClick={() => handleGoToPage({ page: item.pageName })}
+                              >
+                                {item.title}
+                              </SubMenu>
+                            )
+                          ))}
+                        </MenuContent>
+                      </Accordion.Collapse>
+                    </MenuContainer>
+                  )}
 
-                  {sessionState?.user?.level !== 5 && (
+                  {(sessionState?.user?.level !== 5 && sessionState?.user?.level !== 8) && (
                     <MenuContainer>
                       <ContextAwareToggle
                         eventKey='2'
@@ -398,7 +430,7 @@ export const SidebarMenu = (props) => {
                     </MenuContainer>
                   )}
 
-                  {sessionState?.user?.level !== 5 && (
+                  {(sessionState?.user?.level !== 5 && sessionState?.user?.level !== 8) && (
                     <MenuContainer>
                       <ContextAwareToggle
                         eventKey='3'
@@ -457,7 +489,7 @@ export const SidebarMenu = (props) => {
                     </MenuContainer>
                   )}
 
-                  {sessionState?.user?.level !== 5 && (
+                  {(sessionState?.user?.level !== 5 && sessionState?.user?.level !== 8) && (
                     <MenuContainer>
                       <ContextAwareToggle
                         eventKey='5'
@@ -525,7 +557,7 @@ export const SidebarMenu = (props) => {
                     </MenuContainer>
                   )}
 
-                  {sessionState?.user?.level !== 5 && sessionState?.user?.level !== 2 && (
+                  {sessionState?.user?.level === 0 && (
                     <MenuContainer>
                       <ContextAwareToggle
                         eventKey='8'
@@ -553,7 +585,7 @@ export const SidebarMenu = (props) => {
                     </MenuContainer>
                   )}
 
-                  {sessionState?.user?.level !== 5 && sessionState?.user?.level !== 2 && (
+                  {sessionState?.user?.level === 0 && (
                     <MenuContainer>
                       <ContextAwareToggle
                         eventKey='9'
@@ -582,7 +614,7 @@ export const SidebarMenu = (props) => {
                     </MenuContainer>
                   )}
 
-                  {sessionState?.user?.level !== 5 && sessionState?.user?.level !== 2 && (
+                  {sessionState?.user?.level === 0 && (
                     <MenuContainer>
                       <ContextAwareToggle
                         eventKey='10'
@@ -609,6 +641,36 @@ export const SidebarMenu = (props) => {
                       </Accordion.Collapse>
                     </MenuContainer>
                   )}
+                  {sessionState?.user?.level === 0 && (
+                    <MenuContainer>
+                      <span>{t('SALES_CHANNELS_AND_PRODUCTS', 'Sales channels and products')}</span>
+                      <ContextAwareToggle
+                        eventKey='12'
+                        active={
+                          location.pathname === '/my-products/ordering-website' ||
+                          location.pathname === '/my-products/customer-app' ||
+                          location.pathname === '/my-products/store-app' ||
+                          location.pathname === '/my-products/driver-app'
+                        }
+                      >
+                        <BagCheck />
+                        <span>{t('MY_PRODUCTS', 'My products')}</span>
+                      </ContextAwareToggle>
+                      <Accordion.Collapse eventKey='12'>
+                        <MenuContent>
+                          {myProductMenus.map(item => (
+                            <SubMenu
+                              key={item.id}
+                              active={location.pathname.includes(item.url)}
+                              onClick={() => handleGoToPage({ page: item.pageName })}
+                            >
+                              {item.title}
+                            </SubMenu>
+                          ))}
+                        </MenuContent>
+                      </Accordion.Collapse>
+                    </MenuContainer>
+                  )}
                 </Accordion>
               </div>
               <div className='d-flex flex-column mt-4'>
@@ -649,7 +711,7 @@ export const SidebarMenu = (props) => {
                     </MenuContainer>
                   </Accordion>
                 )}
-                {sessionState?.user?.level !== 5 && sessionState?.user?.level !== 2 && (
+                {sessionState?.user?.level === 0 && (
                   <Button
                     className='d-flex align-items-center'
                     variant={location.pathname === '/ordering-products' && 'primary'}
@@ -715,9 +777,9 @@ export const SidebarMenu = (props) => {
               className='d-flex flex-column px-1'
             >
               <Button
-                className='d-flex align-items-center'
-                onClick={() => handleGoToPage({ page: 'profile' })}
+                className='d-000flex align-items-center'
                 variant={location.pathname === '/profile' && 'primary'}
+                onClick={() => handleGoToPage({ page: 'profile' })}
               >
                 {sessionState?.user?.photo ? (
                   <Image src={sessionState?.user?.photo} width='30px' height='30px' roundedCircle />

package/src/components/SidebarMenu/styles.js

@@ -156,6 +156,13 @@ export const UserInfo = styled.div`
 `
 export const MenuContainer = styled.div`
   margin: 5px 0;
+  > span {
+    font-weight: 500;
+    font-size: 10px;
+    line-height: 15px;
+    padding: 0px 13px;
+    color: ${props => props.theme.colors.lightGray};
+  }
   > button {
     width: 100%;
     text-align: initial;

package/src/components/Stores/BusinessLocation/index.js

@@ -138,7 +138,7 @@ export const BusinessLocation = (props) => {
               ? formState?.result?.result?.address
               : formState?.changes?.address ?? business?.address ?? ''
           }
-          autoComplete='new-field'
+          autoComplete='new-password'
           countryCode={configs?.country_autocomplete?.value || '*'}
         />
       </WrapperGoogleAutoCompleteInput>

package/src/components/Stores/BusinessProductsListing/index.js

@@ -190,6 +190,14 @@ const BusinessProductsListingUI = (props) => {
     setBatchImageFormOpen(true)
   }
 
+  useEffect(() => {
+    if (slug && !isInitialRender) {
+      setOpenSidebar(null)
+      setSelectedProduct(null)
+      handleUpdateInitialRender(false)
+    }
+  }, [slug, isInitialRender])
+
   useEffect(() => {
     if (!slug) {
       setSelectedBusiness(null)

package/src/components/Stores/BusinessWebhooks/index.js

@@ -96,8 +96,8 @@ const BusinessWebhooksUI = (props) => {
       <WebhooksContainer>
         <Title>{t('WEBHOOKS', 'WEbhooks')}</Title>
         {
-          business?.webhooks?.length > 0 && business?.webhooks.map((webhook, i) => (
-            <WebhookAddContainer key={i}>
+          business?.webhooks?.length > 0 && business?.webhooks.map(webhook => (
+            <WebhookAddContainer key={webhook.id}>
               <HookSelectWrapper inActive>
                 <Select
                   defaultValue={webhook?.hook}

package/src/components/Stores/PaymentOption/index.js

@@ -40,6 +40,7 @@ export const PaymentOption = (props) => {
   const [isMenuOpen, setIsMenuOpen] = useState(false)
   const [paymentTabs, setPaymentTabs] = useState(sitesState?.sites?.length > 0 ? 0 : 1)
   const [confirm, setConfirm] = useState({ open: false, content: null, handleOnAccept: null })
+  const [localState, setLocalState] = useState({allowed_order_types: businessPaymethod?.allowed_order_types, sites: businessPaymethod?.sites})
 
   const setPaymethodInfo = (values) => {
     const data = {}
@@ -102,6 +103,15 @@ export const PaymentOption = (props) => {
     })
   }, [businessPaymethod?.id, businessPaymethod?.sandbox, businessPaymethod?.allowed_order_types])
 
+  useEffect(() => {
+    if (changesState?.allowed_order_types) {
+      setLocalState({allowed_order_types: changesState?.allowed_order_types})
+    }
+    if (changesState?.sites) {
+      setLocalState({sites: changesState?.sites})
+    }
+  }, [changesState?.allowed_order_types, changesState?.sites])
+
   return (
     <>
       <Container id='payment_method_option'>
@@ -153,7 +163,7 @@ export const PaymentOption = (props) => {
               key={site.id}
               onClick={() => setPaymethodInfo({ key: 'sites', value: site.id })}
             >
-              {(changesState?.sites ?? businessPaymethod?.sites?.map(s => s.id))?.includes(site.id) ? (
+              {(localState?.sites ?? businessPaymethod?.sites?.map(s => s.id))?.includes(site.id) ? (
                 <RiCheckboxFill className='fill' />
               ) : (
                 <RiCheckboxBlankLine />
@@ -169,7 +179,7 @@ export const PaymentOption = (props) => {
               key={type.value}
               onClick={() => setPaymethodInfo({ key: 'allowed_order_types', value: type.value })}
             >
-              {(changesState?.allowed_order_types ?? businessPaymethod?.allowed_order_types)?.includes(type.value) ? (
+              {(localState?.allowed_order_types ?? businessPaymethod?.allowed_order_types)?.includes(type.value) ? (
                 <RiCheckboxFill className='fill' />
               ) : (
                 <RiCheckboxBlankLine />

package/src/components/Stores/PaymentOptionMethods/index.js

@@ -46,6 +46,7 @@ export const PaymentOptionMethods = (props) => {
   const [isMenuOpen, setIsMenuOpen] = useState(false)
   const [paymentTabs, setPaymentTabs] = useState(0)
   const [confirm, setConfirm] = useState({ open: false, content: null, handleOnAccept: null })
+  const [localState, setLocalState] = useState({allowed_order_types: businessPaymethod?.allowed_order_types, sites: businessPaymethod?.sites})
 
   const setPaymethodInfo = (values) => {
     const data = {}
@@ -109,6 +110,15 @@ export const PaymentOptionMethods = (props) => {
     cleanChangesState(initState)
   }, [])
 
+  useEffect(() => {
+    if (changesState?.allowed_order_types) {
+      setLocalState({allowed_order_types: changesState?.allowed_order_types})
+    }
+    if (changesState?.sites) {
+      setLocalState({sites: changesState?.sites})
+    }
+  }, [changesState?.sites, changesState?.allowed_order_types])
+
   return (
     <>
       <Container id={id}>
@@ -225,7 +235,7 @@ export const PaymentOptionMethods = (props) => {
               key={site.id}
               onClick={() => setPaymethodInfo({ key: 'sites', value: site.id })}
             >
-              {(changesState?.sites ?? businessPaymethod?.sites?.map(s => s.id))?.includes(site.id) ? (
+              {(localState?.sites ?? businessPaymethod?.sites?.map(s => s.id))?.includes(site.id) ? (
                 <RiCheckboxFill className='fill' />
               ) : (
                 <RiCheckboxBlankLine />
@@ -241,7 +251,7 @@ export const PaymentOptionMethods = (props) => {
               key={type.value}
               onClick={() => setPaymethodInfo({ key: 'allowed_order_types', value: type.value })}
             >
-              {(changesState?.allowed_order_types ?? businessPaymethod?.allowed_order_types)?.includes(type.value) ? (
+              {(localState?.allowed_order_types ?? businessPaymethod?.allowed_order_types)?.includes(type.value) ? (
                 <RiCheckboxFill className='fill' />
               ) : (
                 <RiCheckboxBlankLine />

package/src/components/Stores/PaymentOptionPaypal/index.js

@@ -44,6 +44,7 @@ export const PaymentOptionPaypal = (props) => {
   const [isMenuOpen, setIsMenuOpen] = useState(false)
   const [paymentTabs, setPaymentTabs] = useState(0)
   const [confirm, setConfirm] = useState({ open: false, content: null, handleOnAccept: null })
+  const [localState, setLocalState] = useState({allowed_order_types: businessPaymethod?.allowed_order_types, sites: businessPaymethod?.sites})
 
   const actionSidebar = (value) => {
     if (!value) {
@@ -109,6 +110,15 @@ export const PaymentOptionPaypal = (props) => {
     cleanChangesState(initState)
   }, [])
 
+  useEffect(() => {
+    if (changesState?.allowed_order_types) {
+      setLocalState({allowed_order_types: changesState?.allowed_order_types})
+    }
+    if (changesState?.sites) {
+      setLocalState({sites: changesState?.sites})
+    }
+  }, [changesState?.sites, changesState?.allowed_order_types])
+
   return (
     <>
       <Container id='paypal'>
@@ -225,7 +235,7 @@ export const PaymentOptionPaypal = (props) => {
               key={site.id}
               onClick={() => setPaymethodInfo({ key: 'sites', value: site.id })}
             >
-              {(changesState?.sites ?? businessPaymethod?.sites?.map(s => s.id))?.includes(site.id) ? (
+              {(localState?.sites ?? businessPaymethod?.sites?.map(s => s.id))?.includes(site.id) ? (
                 <RiCheckboxFill className='fill' />
               ) : (
                 <RiCheckboxBlankLine />
@@ -241,7 +251,7 @@ export const PaymentOptionPaypal = (props) => {
               key={type.value}
               onClick={() => setPaymethodInfo({ key: 'allowed_order_types', value: type.value })}
             >
-              {(changesState?.allowed_order_types ?? businessPaymethod?.allowed_order_types)?.includes(type.value) ? (
+              {(localState?.allowed_order_types ?? businessPaymethod?.allowed_order_types)?.includes(type.value) ? (
                 <RiCheckboxFill className='fill' />
               ) : (
                 <RiCheckboxBlankLine />

package/src/components/Stores/PaymentOptionStripeDirect/index.js

@@ -44,6 +44,7 @@ export const PaymentOptionStripeDirect = (props) => {
   const [isMenuOpen, setIsMenuOpen] = useState(false)
   const [paymentTabs, setPaymentTabs] = useState(0)
   const [confirm, setConfirm] = useState({ open: false, content: null, handleOnAccept: null })
+  const [localState, setLocalState] = useState({allowed_order_types: businessPaymethod?.allowed_order_types, sites: businessPaymethod?.sites})
 
   const setPaymethodInfo = (values) => {
     const data = {}
@@ -107,6 +108,15 @@ export const PaymentOptionStripeDirect = (props) => {
     cleanChangesState(initState)
   }, [])
 
+  useEffect(() => {
+    if (changesState?.allowed_order_types) {
+      setLocalState({allowed_order_types: changesState?.allowed_order_types})
+    }
+    if (changesState?.sites) {
+      setLocalState({sites: changesState?.sites})
+    }
+  }, [changesState?.sites, changesState?.allowed_order_types])
+
   return (
     <>
       <Container id='stripe_direct'>
@@ -223,7 +233,7 @@ export const PaymentOptionStripeDirect = (props) => {
               key={site.id}
               onClick={() => setPaymethodInfo({ key: 'sites', value: site.id })}
             >
-              {(changesState?.sites ?? businessPaymethod?.sites?.map(s => s.id))?.includes(site.id) ? (
+              {(localState?.sites ?? businessPaymethod?.sites?.map(s => s.id))?.includes(site.id) ? (
                 <RiCheckboxFill className='fill' />
               ) : (
                 <RiCheckboxBlankLine />
@@ -239,7 +249,7 @@ export const PaymentOptionStripeDirect = (props) => {
               key={type.value}
               onClick={() => setPaymethodInfo({ key: 'allowed_order_types', value: type.value })}
             >
-              {(changesState?.allowed_order_types ?? businessPaymethod?.allowed_order_types)?.includes(type.value) ? (
+              {(localState?.allowed_order_types ?? businessPaymethod?.allowed_order_types)?.includes(type.value) ? (
                 <RiCheckboxFill className='fill' />
               ) : (
                 <RiCheckboxBlankLine />