ordering-ui-admin-external 1.13.3 → 1.14.0

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

@@ -45,20 +45,30 @@ export const PaymentOptionStripeDirect = (props) => {
   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 filteredOptions = localState?.sites ?? businessPaymethod?.sites?.filter(a => sitesState?.sites?.find(b => a.id === b.id))
+  const [all, setAll] = useState(!filteredOptions?.length)
 
   const setPaymethodInfo = (values) => {
     const data = {}
-    let array = changesState?.[values.key] ?? (values.key === 'allowed_order_types'
-      ? businessPaymethod?.[values.key]
-      : businessPaymethod?.[values.key]?.map(i => i.id)) ?? []
+    if (values?.value === 'All') {
+      data[values.key] = []
+      setAll(!all)
+    } else {
+      let array = changesState?.[values.key] ?? (values.key === 'allowed_order_types'
+        ? businessPaymethod?.[values.key]
+        : businessPaymethod?.[values.key]?.map(i => i.id)) ?? []
 
-    array = [...new Set(
-      array.includes(values.value)
-        ? array.filter(item => item !== values.value)
-        : [...array, values.value]
-    )]
+      array = [...new Set(
+        array.includes(values.value)
+          ? array.filter(item => item !== values.value)
+          : [...array, values.value]
+      )]
 
-    data[values.key] = array.length > 0 ? array : []
+      data[values.key] = array.length > 0 ? array : []
+      if (values.key === 'sites') {
+        setAll(!data?.sites?.length)
+      }
+    }
 
     handleChangeBusinessPaymentState(data)
   }
@@ -109,12 +119,10 @@ export const PaymentOptionStripeDirect = (props) => {
   }, [])
 
   useEffect(() => {
-    if (changesState?.allowed_order_types) {
-      setLocalState({ allowed_order_types: changesState?.allowed_order_types })
-    }
-    if (changesState?.sites) {
-      setLocalState({ sites: changesState?.sites })
-    }
+    const changes = {}
+    if (changesState?.allowed_order_types) changes.allowed_order_types = changesState?.allowed_order_types
+    if (changesState?.sites) changes.sites = changesState?.sites
+    if (Object.keys(changes).length > 0) setLocalState(JSON.parse(JSON.stringify(changes)))
   }, [changesState?.sites, changesState?.allowed_order_types])
 
   return (
@@ -225,19 +233,32 @@ export const PaymentOptionStripeDirect = (props) => {
         )}
 
         {paymentTabs === 1 && sitesState?.sites?.length > 0 && (
-          sitesState?.sites.map(site => (
+          <>
             <TabOption
-              key={site.id}
-              onClick={() => setPaymethodInfo({ key: 'sites', value: site.id })}
+              key='all'
+              onClick={() => setPaymethodInfo({ key: 'sites', value: 'All' })}
             >
-              {(localState?.sites ?? businessPaymethod?.sites?.map(s => s.id))?.includes(site.id) ? (
+              {all ? (
                 <RiCheckboxFill className='fill' />
               ) : (
                 <RiCheckboxBlankLine />
               )}
-              <TabOptionName>{site.name}</TabOptionName>
+              <TabOptionName>{t('ALL', 'All')}</TabOptionName>
             </TabOption>
-          ))
+            {!all && sitesState?.sites.map(site => (
+              <TabOption
+                key={site.id}
+                onClick={() => setPaymethodInfo({ key: 'sites', value: site.id })}
+              >
+                {(localState?.sites ?? businessPaymethod?.sites?.map(s => s.id))?.includes(site.id) ? (
+                  <RiCheckboxFill className='fill' />
+                ) : (
+                  <RiCheckboxBlankLine />
+                )}
+                <TabOptionName>{site.name}</TabOptionName>
+              </TabOption>
+            ))}
+          </>
         )}
 
         {paymentTabs === 2 && (

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

@@ -47,21 +47,31 @@ 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 [localState, setLocalState] = useState({ allowed_order_types: businessPaymethod?.allowed_order_types, sites: businessPaymethod?.sites })
+  const filteredOptions = localState?.sites ?? businessPaymethod?.sites?.filter(a => sitesState?.sites?.find(b => a.id === b.id))
+  const [all, setAll] = useState(!filteredOptions?.length)
 
   const setPaymethodInfo = (values) => {
     const data = {}
-    let array = changesState?.[values.key] ?? (values.key === 'allowed_order_types'
-      ? businessPaymethod?.[values.key]
-      : businessPaymethod?.[values.key]?.map(i => i.id)) ?? []
+    if (values?.value === 'All') {
+      data[values.key] = []
+      setAll(!all)
+    } else {
+      let array = changesState?.[values.key] ?? (values.key === 'allowed_order_types'
+        ? businessPaymethod?.[values.key]
+        : businessPaymethod?.[values.key]?.map(i => i.id)) ?? []
 
-    array = [...new Set(
-      array.includes(values.value)
-        ? array.filter(item => item !== values.value)
-        : [...array, values.value]
-    )]
+      array = [...new Set(
+        array.includes(values.value)
+          ? array.filter(item => item !== values.value)
+          : [...array, values.value]
+      )]
 
-    data[values.key] = array.length > 0 ? array : []
+      data[values.key] = array.length > 0 ? array : []
+      if (values.key === 'sites') {
+        setAll(!data?.sites?.length)
+      }
+    }
 
     handleChangeBusinessPaymentState(data)
   }
@@ -104,12 +114,10 @@ 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})
-    }
+    const changes = {}
+    if (changesState?.allowed_order_types) changes.allowed_order_types = changesState?.allowed_order_types
+    if (changesState?.sites) changes.sites = changesState?.sites
+    if (Object.keys(changes).length > 0) setLocalState(JSON.parse(JSON.stringify(changes)))
   }, [changesState?.sites, changesState?.allowed_order_types])
 
   return (
@@ -232,6 +240,7 @@ export const PaymethodOptionStripeConnect = (props) => {
                   }
                   placeholder={t('FIXED_FEE', 'Fixed fee')}
                   onChange={e => handleChangeStripeInput(e)}
+                  min={0}
                 />
               </InputWrapper>
 
@@ -247,6 +256,7 @@ export const PaymethodOptionStripeConnect = (props) => {
                   }
                   placeholder={t('PERCENTAGE_FEE', 'Percentage fee')}
                   onChange={e => handleChangeStripeInput(e)}
+                  min={0}
                 />
               </InputWrapper>
             </InputGroup>
@@ -254,19 +264,32 @@ export const PaymethodOptionStripeConnect = (props) => {
         )}
 
         {paymentTabs === 1 && sitesState?.sites?.length > 0 && (
-          sitesState?.sites.map(site => (
+          <>
             <TabOption
-              key={site.id}
-              onClick={() => setPaymethodInfo({ key: 'sites', value: site.id })}
+              key='all'
+              onClick={() => setPaymethodInfo({ key: 'sites', value: 'All' })}
             >
-              {(localState?.sites ?? businessPaymethod?.sites?.map(s => s.id))?.includes(site.id) ? (
+              {all ? (
                 <RiCheckboxFill className='fill' />
               ) : (
                 <RiCheckboxBlankLine />
               )}
-              <TabOptionName>{site.name}</TabOptionName>
+              <TabOptionName>{t('ALL', 'All')}</TabOptionName>
             </TabOption>
-          ))
+            {!all && sitesState?.sites.map(site => (
+              <TabOption
+                key={site.id}
+                onClick={() => setPaymethodInfo({ key: 'sites', value: site.id })}
+              >
+                {(localState?.sites ?? businessPaymethod?.sites?.map(s => s.id))?.includes(site.id) ? (
+                  <RiCheckboxFill className='fill' />
+                ) : (
+                  <RiCheckboxBlankLine />
+                )}
+                <TabOptionName>{site.name}</TabOptionName>
+              </TabOption>
+            ))}
+          </>
         )}
 
         {paymentTabs === 2 && (

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

@@ -45,20 +45,30 @@ export const PaymethodOptionStripeRedirect = (props) => {
   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 filteredOptions = localState?.sites ?? businessPaymethod?.sites?.filter(a => sitesState?.sites?.find(b => a.id === b.id))
+  const [all, setAll] = useState(!filteredOptions?.length)
 
   const setPaymethodInfo = (values) => {
     const data = {}
-    let array = changesState?.[values.key] ?? (values.key === 'allowed_order_types'
-      ? businessPaymethod?.[values.key]
-      : businessPaymethod?.[values.key]?.map(i => i.id)) ?? []
+    if (values?.value === 'All') {
+      data[values.key] = []
+      setAll(!all)
+    } else {
+      let array = changesState?.[values.key] ?? (values.key === 'allowed_order_types'
+        ? businessPaymethod?.[values.key]
+        : businessPaymethod?.[values.key]?.map(i => i.id)) ?? []
 
-    array = [...new Set(
-      array.includes(values.value)
-        ? array.filter(item => item !== values.value)
-        : [...array, values.value]
-    )]
+      array = [...new Set(
+        array.includes(values.value)
+          ? array.filter(item => item !== values.value)
+          : [...array, values.value]
+      )]
 
-    data[values.key] = array.length > 0 ? array : []
+      data[values.key] = array.length > 0 ? array : []
+      if (values.key === 'sites') {
+        setAll(!data?.sites?.length)
+      }
+    }
 
     handleChangeBusinessPaymentState(data)
   }
@@ -109,12 +119,10 @@ export const PaymethodOptionStripeRedirect = (props) => {
   }, [])
 
   useEffect(() => {
-    if (changesState?.allowed_order_types) {
-      setLocalState({ allowed_order_types: changesState?.allowed_order_types })
-    }
-    if (changesState?.sites) {
-      setLocalState({ sites: changesState?.sites })
-    }
+    const changes = {}
+    if (changesState?.allowed_order_types) changes.allowed_order_types = changesState?.allowed_order_types
+    if (changesState?.sites) changes.sites = changesState?.sites
+    if (Object.keys(changes).length > 0) setLocalState(JSON.parse(JSON.stringify(changes)))
   }, [changesState?.sites, changesState?.allowed_order_types])
 
   return (
@@ -225,19 +233,32 @@ export const PaymethodOptionStripeRedirect = (props) => {
         )}
 
         {paymentTabs === 1 && sitesState?.sites?.length > 0 && (
-          sitesState?.sites.map(site => (
+          <>
             <TabOption
-              key={site.id}
-              onClick={() => setPaymethodInfo({ key: 'sites', value: site.id })}
+              key='all'
+              onClick={() => setPaymethodInfo({ key: 'sites', value: 'All' })}
             >
-              {(localState?.sites ?? businessPaymethod?.sites?.map(s => s.id))?.includes(site.id) ? (
+              {all ? (
                 <RiCheckboxFill className='fill' />
               ) : (
                 <RiCheckboxBlankLine />
               )}
-              <TabOptionName>{site.name}</TabOptionName>
+              <TabOptionName>{t('ALL', 'All')}</TabOptionName>
             </TabOption>
-          ))
+            {!all && sitesState?.sites.map(site => (
+              <TabOption
+                key={site.id}
+                onClick={() => setPaymethodInfo({ key: 'sites', value: site.id })}
+              >
+                {(localState?.sites ?? businessPaymethod?.sites?.map(s => s.id))?.includes(site.id) ? (
+                  <RiCheckboxFill className='fill' />
+                ) : (
+                  <RiCheckboxBlankLine />
+                )}
+                <TabOptionName>{site.name}</TabOptionName>
+              </TabOption>
+            ))}
+          </>
         )}
 
         {paymentTabs === 2 && (

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

@@ -123,6 +123,7 @@ const ProductDetailsUI = (props) => {
           actionSidebar={actionSidebar}
           showOption={showOption}
           handleShowOption={handleShowOption}
+          extraOpen={extraOpen}
         />
       )}
       {extraOpen && (

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

@@ -342,6 +342,24 @@ const ProductDetailsAdvancedUI = (props) => {
           />
         )}
       </TypeSelectWrapper>
+      <FieldRow fullWidth>
+        <InputContainer>
+          <LabelCustom htmlFor='external_id'>{t('EXTERNAL_ID', 'External Id')}</LabelCustom>
+          <Input
+            name='external_id'
+            placeholder={t('EXTERNAL_ID', 'External Id')}
+            defaultValue={productState?.external_id}
+            onChange={(e) => handleClickProperty('external_id', e.target.value ?? null)}
+            disabled={formState.loading}
+            autoComplete='off'
+            onKeyPress={(e) => {
+              if (!/^[0-9]$/.test(e.key)) {
+                e.preventDefault()
+              }
+            }}
+          />
+        </InputContainer>
+      </FieldRow>
       <FieldRow>
         <InputContainer>
           <LabelCustom htmlFor='cost_price'>{t('PRODUCT_COST', 'Product cost')}</LabelCustom>

package/src/components/Stores/ProductDetailsAdvanced/styles.js

@@ -168,6 +168,11 @@ export const FieldRow = styled.div`
     > div {
       width: 48%;
     }
+    ${({ fullWidth }) => fullWidth && css`
+      > div {
+        width: 100%;
+      }
+    `}
   }
 `
 

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

@@ -17,7 +17,7 @@ import {
   InputWrapper,
   ActionsForm,
   InventoryWrapper,
-  Wrapper,
+  // Wrapper,
   RegularWrapper,
   FieldRow,
   ColorShapeWrapper,
@@ -252,22 +252,6 @@ export const ProductDetatilsInformation = (props) => {
             autoComplete='off'
           />
         </InputWrapper>
-        <InputWrapper>
-          <label>{t('EXTERNAL_ID', 'External Id')}</label>
-          <Input
-            name='external_id'
-            placeholder={t('EXTERNAL_ID', 'External Id')}
-            defaultValue={product?.external_id}
-            onChange={handleChangeInput}
-            disabled={formState.loading}
-            autoComplete='off'
-            onKeyPress={(e) => {
-              if (!/^[0-9]$/.test(e.key)) {
-                e.preventDefault()
-              }
-            }}
-          />
-        </InputWrapper>
         <FieldRow>
           <InputWrapper>
             <label className='space-between'>
@@ -332,36 +316,6 @@ export const ProductDetatilsInformation = (props) => {
             autoComplete='off'
           />
         </InputWrapper>
-        <InputWrapper>
-          <label>{t('SLUG', 'Slug')}</label>
-          <Input
-            name='slug'
-            placeholder={t('SLUG', 'Slug')}
-            onChange={handleChangeInput}
-            disabled={formState.loading}
-            autoComplete='off'
-            value={formState?.changes?.slug ?? product?.slug ?? ''}
-            onKeyPress={e => {
-              if (e.which === 32) { e.preventDefault() }
-            }}
-          />
-          {/* <Wrapper
-            style={{ paddingTop: 10 }}
-          >
-            <Button
-              color='lightPrimary'
-              borderRadius='7.6px'
-              type='button'
-              disabled={formState.loading}
-              onClick={() => setAutoGenerate({
-                ...autoGenerateCode,
-                isAutoGenerate: true
-              })}
-            >
-              {formState?.loading ? t('LOADING', 'Loading') : t('AUTOGENERATE', 'Auto Generate')}
-            </Button>
-          </Wrapper> */}
-        </InputWrapper>
 
         <InventoryWrapper>
           <span>{t('INVENTORY', 'Inventory')}</span>
@@ -494,7 +448,7 @@ export const ProductDetatilsInformation = (props) => {
         padding='30px'
         title={t('IMAGE_CROP', 'Image crop')}
         open={cropState?.open}
-        onClose={() => setCropState({ ...cropState, open: false })}
+        onRemove={() => setCropState({ ...cropState, open: false })}
       >
         <ImageCrop
           photo={cropState?.data}

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

@@ -480,7 +480,7 @@ const ProductExtraOptionDetailsUI = (props) => {
         padding='30px'
         title={t('IMAGE_CROP', 'Image crop')}
         open={cropState?.open}
-        onClose={() => setCropState({ ...cropState, open: false })}
+        onRemove={() => setCropState({ ...cropState, open: false })}
         className='ordering-img-crop'
       >
         <ImageCrop

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

@@ -453,7 +453,7 @@ const ProductExtraOptionsUI = (props) => {
         padding='30px'
         title={t('IMAGE_CROP', 'Image crop')}
         open={cropState?.open}
-        onClose={() => setCropState({ ...cropState, open: false })}
+        onRemove={() => setCropState({ ...cropState, open: false })}
         className='ordering-image-crop'
       >
         <ImageCrop

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

@@ -364,7 +364,7 @@ export const ProductExtraSuboption = (props) => {
         padding='30px'
         title={t('IMAGE_CROP', 'Image crop')}
         open={cropState?.open}
-        onClose={() => setCropState({ ...cropState, open: false })}
+        onRemove={() => setCropState({ ...cropState, open: false })}
         className='ordering-img-crop'
       >
         <ImageCrop

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

@@ -253,7 +253,7 @@ const ProductGalleryUI = (props) => {
         padding='30px'
         title={t('IMAGE_CROP', 'Image crop')}
         open={cropState?.open}
-        onClose={() => setCropState({ ...cropState, open: false })}
+        onRemove={() => setCropState({ ...cropState, open: false })}
         className='ordering-img-crop'
       >
         <ImageCrop

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

@@ -1,8 +1,8 @@
-import React, { useState } from 'react'
+import React, { useState, useEffect } from 'react'
 import { useLanguage, useUtils } from 'ordering-components-admin-external'
 import BsChevronRight from '@meronex/icons/bs/BsChevronRight'
 import BiImage from '@meronex/icons/bi/BiImage'
-import { XLg, ThreeDots, Laptop, Phone } from 'react-bootstrap-icons'
+import { XLg, ThreeDots, Laptop, Phone, ArrowsAngleContract, ArrowsAngleExpand } from 'react-bootstrap-icons'
 import { Switch } from '../../../styles/Switch'
 import { IconButton } from '../../../styles'
 import { DropdownButton, Dropdown } from 'react-bootstrap'
@@ -42,7 +42,8 @@ export const ProductSummary = (props) => {
     productState,
     productCart,
     handleDeleteProduct,
-    showProductOption
+    showProductOption,
+    extraOpen
   } = props
 
   const [, t] = useLanguage()
@@ -53,6 +54,7 @@ export const ProductSummary = (props) => {
   const [confirm, setConfirm] = useState({ open: false, content: null, handleOnAccept: null })
   const [isProductPreview, setIsProductPreview] = useState(false)
   const [selectedView, setSelectedView] = useState('desktop')
+  const [isExpand, setIsExpand] = useState(false)
 
   const productConfigOptions = [
     {
@@ -127,6 +129,19 @@ export const ProductSummary = (props) => {
     }
   }
 
+  const expandSideBar = () => {
+    const element = document.getElementById('product_details')
+    if (!element) return
+
+    if (isExpand) element.style.width = '500px'
+    else element.style.width = '100vw'
+    setIsExpand(prev => !prev)
+  }
+
+  useEffect(() => {
+    if (extraOpen) setIsExpand(false)
+  }, [extraOpen])
+
   return (
     <>
       <ProductDetailsContainer disabled={productState.loading}>
@@ -141,6 +156,12 @@ export const ProductSummary = (props) => {
             />
           </LeftHeader>
           <RightHeader>
+            <IconButton
+              color='black'
+              onClick={() => expandSideBar()}
+            >
+              {isExpand ? <ArrowsAngleContract /> : <ArrowsAngleExpand />}
+            </IconButton>
             <ActionSelectorWrapper>
               <DropdownButton
                 className='product_actions'

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

@@ -231,7 +231,7 @@ const ProductTagDetailsUI = (props) => {
         padding='30px'
         title={t('IMAGE_CROP', 'Image crop')}
         open={cropState?.open}
-        onClose={() => setCropState({ ...cropState, open: false })}
+        onRemove={() => setCropState({ ...cropState, open: false })}
       >
         <ImageCrop
           photo={cropState?.data}

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

@@ -1,6 +1,6 @@
 import React, { useRef, useState, useEffect } from 'react'
 import { useLanguage, DragAndDrop, ExamineClick, useUtils } from 'ordering-components-admin-external'
-import { Button, Input, TextArea, Switch } from '../../../styles'
+import { Button, Input, TextArea } from '../../../styles'
 import { Alert, Modal, ImageCrop } from '../../Shared'
 import { bytesConverter } from '../../../utils'
 import Skeleton from 'react-loading-skeleton'
@@ -38,7 +38,6 @@ export const SeoOptions = (props) => {
   const productImageInputRef = useRef(null)
   const [alertState, setAlertState] = useState({ open: false, content: [] })
   const [cropState, setCropState] = useState({ name: null, data: null, open: false })
-  const [isSameInfo, setIsSameInfo] = useState(false)
 
   const titleRef = useRef(null)
   const descriptionRef = useRef(null)
@@ -120,8 +119,7 @@ export const SeoOptions = (props) => {
     })
   }
 
-  useEffect(() => {
-    if (!isSameInfo) return
+  const handleUseSameInfo = () => {
     if (isBusinessSeo) {
       setFormState({
         ...formState,
@@ -138,10 +136,9 @@ export const SeoOptions = (props) => {
     }
     titleRef.current.value = data?.name
     descriptionRef.current.value = data?.description
-  }, [isSameInfo, isBusinessSeo, data])
+  }
 
   useEffect(() => {
-    setIsSameInfo(false)
     titleRef.current.value = data?.seo_title ?? ''
     descriptionRef.current.value = data?.seo_description ?? ''
   }, [data])
@@ -195,11 +192,7 @@ export const SeoOptions = (props) => {
           </SEOImage>
         </WrapperImage>
         <UseSameInfoWrapper>
-          <label>{t('USE_SAME_PRODUCT_INFORMATION', 'Use the same as main product information')}</label>
-          <Switch
-            defaultChecked={isSameInfo || false}
-            onChange={val => setIsSameInfo(val)}
-          />
+          <span onClick={handleUseSameInfo}>{t('USE_SAME_PRODUCT_INFORMATION', 'Use the same as main product information')}</span>
         </UseSameInfoWrapper>
         <WrapperShortDescription>
           <label>{t('SEO_TITLE', 'SEO Title')}</label>
@@ -251,6 +244,19 @@ export const SeoOptions = (props) => {
             />
           </WrapperDescription>
         )}
+        <WrapperDescription>
+          <label>{t('SLUG', 'Slug')}</label>
+          <Input
+            name='slug'
+            placeholder={t('SLUG', 'Slug')}
+            defaultValue={
+              formState?.result?.result
+                ? formState?.result?.result?.slug
+                : formState?.changes?.slug ?? data?.slug ?? ''
+            }
+            onChange={(e) => handleProductCategoryChangeInput(e)}
+          />
+        </WrapperDescription>
         <ActionButtons>
           <Button
             color='primary'
@@ -277,7 +283,7 @@ export const SeoOptions = (props) => {
         padding='30px'
         title={t('IMAGE_CROP', 'Image crop')}
         open={cropState?.open}
-        onClose={() => setCropState({ ...cropState, open: false })}
+        onRemove={() => setCropState({ ...cropState, open: false })}
       >
         <ImageCrop
           photo={cropState?.data}

package/src/components/Stores/SeoOptions/styles.js

@@ -139,19 +139,10 @@ export const UseSameInfoWrapper = styled.div`
   align-items: center;
   margin-bottom: 20px;
 
-  label {
-    &:first-child {
-      font-weight: 400;
-      font-size: 14px;
-      margin: 0px;
-      margin-right: 10px;
-      ${props => props.theme.rtl && css`
-        margin-right: 0px;
-        margin-left: 10px;
-      `}
-    }
-    &:last-child {
-      min-width: 25px;
-    }
+  span {
+    font-weight: 400;
+    font-size: 14px;
+    cursor: pointer;
+    color: ${props => props.theme.colors.primary};
   }
 `

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

@@ -416,7 +416,7 @@ export const ServiceDetail = (props) => {
         padding='30px'
         title={t('IMAGE_CROP', 'Image crop')}
         open={cropState?.open}
-        onClose={() => setCropState({ ...cropState, open: false })}
+        onRemove={() => setCropState({ ...cropState, open: false })}
       >
         <ImageCrop
           photo={cropState?.data}

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

@@ -94,6 +94,7 @@ export const WizardBusiness = (props) => {
               id='business_new_product_form'
               open={openTutorialSidebarState === 'new_product'}
               onClose={() => setOpenTutorialSidebarState(null)}
+              showExpandIcon
             >
               <BusinessProductAddForm
                 isTutorialMode