ordering-ui-admin-external 1.5.0 → 1.6.0

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'
@@ -64,12 +66,12 @@ export const SidebarMenu = (props) => {
       id: 3,
       title: t('DRIVERS_DASHBOARD', 'Drivers Dashboard'),
       pageName: 'drivers'
+    },
+    {
+      id: 4,
+      title: t('APPOINTMENTS', 'Appointments'),
+      pageName: 'appointments'
     }
-    // {
-    //   id: 4,
-    //   title: t('APPOINTMENTS', 'Appointments'),
-    //   pageName: 'appointments'
-    // }
   ]
 
   const loyaltySubMenus = [
@@ -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,
@@ -141,13 +170,13 @@ export const SidebarMenu = (props) => {
       title: t('MANAGERS', 'Managers'),
       pageName: 'managers',
       url: '/users/managers'
+    },
+    {
+      id: 3,
+      title: t('PROFESSIONALS', 'Professionals'),
+      pageName: 'professionals',
+      url: '/users/professionals'
     }
-    // {
-    //   id: 3,
-    //   title: t('PROFESSIONALS', 'Professionals'),
-    //   pageName: 'professionals',
-    //   url: '/users/professionals'
-    // }
   ]
 
   const settingsSubMenus = [
@@ -267,13 +296,13 @@ export const SidebarMenu = (props) => {
       title: t('PROMOTIONS_ENTERPRISE', 'Promotions enterprise'),
       pageName: 'enterprise_promotions',
       url: '/marketing/promotions-enterprise'
+    },
+    {
+      id: 2,
+      title: t('CAMPAIGN', 'Campaign'),
+      pageName: 'campaign',
+      url: '/marketing/campaign'
     }
-    // {
-    //   id: 2,
-    //   title: t('CAMPAIGN', 'Campaign'),
-    //   pageName: 'campaign',
-    //   url: '/marketing/campaign'
-    // }
   ]
 
   const downloadsSubMenus = [
@@ -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/BusinessProductAddForm/index.js

@@ -51,8 +51,8 @@ const BusinessProductAddFormUI = (props) => {
   const [isCustom, setIsCustom] = useState(false)
 
   const typeList = [
-    { value: 'item', content: <Option>{t('ITEM', 'Item')}</Option> }
-    // { value: 'service', content: <Option>{t('SERVICE', 'Service')}</Option> }
+    { value: 'item', content: <Option>{t('ITEM', 'Item')}</Option> },
+    { value: 'service', content: <Option>{t('SERVICE', 'Service')}</Option> }
   ]
 
   const durationList = [

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 />

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

@@ -44,6 +44,7 @@ export const PaymethodOptionPaypalExpress = (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 = {}
@@ -111,6 +112,15 @@ export const PaymethodOptionPaypalExpress = (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_express'>
@@ -205,7 +215,7 @@ export const PaymethodOptionPaypalExpress = (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 />
@@ -221,7 +231,7 @@ export const PaymethodOptionPaypalExpress = (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/PaymethodOptionStripeConnect/index.js

@@ -47,6 +47,7 @@ export const PaymethodOptionStripeConnect = (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 = {}
@@ -102,6 +103,15 @@ export const PaymethodOptionStripeConnect = (props) => {
     })
   }, [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?.sites, changesState?.allowed_order_types])
+
   return (
     <>
       <Container id='stripe_connect'>
@@ -249,7 +259,7 @@ export const PaymethodOptionStripeConnect = (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 />
@@ -265,7 +275,7 @@ export const PaymethodOptionStripeConnect = (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/PaymethodOptionStripeRedirect/index.js

@@ -44,6 +44,7 @@ export const PaymethodOptionStripeRedirect = (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 PaymethodOptionStripeRedirect = (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_redirect'>
@@ -223,7 +233,7 @@ export const PaymethodOptionStripeRedirect = (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 PaymethodOptionStripeRedirect = (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/Users/CustomerDetails/index.js

@@ -100,7 +100,7 @@ const CustomerDetailsUI = (props) => {
                   {handleChangeActiveUser && (
                     <Switch
                       defaultChecked={userState?.user?.enabled || false}
-                      onChange={enabled => handleChangeActiveUser({ id: userState?.user?.id, enabled: enabled })}
+                      onChange={enabled => handleChangeActiveUser({ ...userState?.user, enabled: enabled })}
                     />
                   )}
                 </>