ordering-ui-admin-external 1.23.5 → 1.24.0

package/src/components/MyProducts/AdvancedSettings/index.js

@@ -3,21 +3,19 @@ import { useLanguage } from 'ordering-components-admin-external'
 import { SettingComponent } from './SettingComponent'
 import { Button, Input } from '../../../styles'
 import { ImageBox } from './ImageBox'
-import { Alert } from '../../Shared'
+import { Alert, Modal } from '../../Shared'
 import { OrderType } from './OrderType'
 import { FontStyleGroup } from './FontStyleGroup'
 
 import {
   Container,
   BoxLayout,
-  HomePageWrapper,
-  ShadowWrapper,
   HeadingWrapper,
   ImageGroup,
   FormControl,
   ButtonWrapper
 } from './styles'
-import { ButtonShadow } from './ButtonShadow'
+import { UploadAudio } from '../UploadAudio'
 
 export const AdvancedSettings = (props) => {
   const {
@@ -33,9 +31,7 @@ export const AdvancedSettings = (props) => {
   const [alertState, setAlertState] = useState({ open: false, content: [] })
   const themeValuesRef = useRef({})
 
-  const homepageViewList = [
-    { key: 'homepage_header', name: t('HOMEPAGE_HEADER', 'Homepage Header'), type: 'hidden', path: 'homepage_view.components.homepage_header.hidden' }
-  ]
+  const [isOpenSound, setIsOpenSound] = useState(false)
 
   const headerList = [
     { name: t('BACKGROUND_COLOR', 'Background color'), type: 'color', path: 'header.components.style.backgroundColor' },
@@ -46,12 +42,9 @@ export const AdvancedSettings = (props) => {
   const businessListing = [
     { name: '', type: 'hidden', path: 'business_listing_view.hidden' },
     { name: t('BUSINESS_LISTING_IMAGE', 'Business listing image'), type: 'image', path: 'business_listing_view.components.business_hero.components.image' },
-    { name: t('PREVIOUS_ORDERS_BLOCK', 'Previous orders block'), type: 'hidden', path: 'business_listing_view.components.previous_orders_block.hidden' },
     { name: t('HIGHEST_RATED_BUSINESS_BLOCK', 'Highest rated business block'), type: 'hidden', path: 'business_listing_view.components.highest_rated_business_block.hidden' },
     { name: t('CATEGORIES_BLOCK', 'Categories block'), type: 'hidden', path: 'business_listing_view.components.categories.hidden' },
     { name: t('AMOUNT_OF_BUSINESSES_TO_DISPLAY_PER_ROW', 'Amount of businesses to display per row:'), type: 'position', path: 'business_listing_view.components.layout.rows' },
-    { name: t('SEARCH_BOX', 'Search box'), type: 'hidden', path: 'business_listing_view.components.search.hidden' },
-    { name: t('FILTER_ICON', 'Filter icon'), type: 'hidden', path: 'business_listing_view.components.filter.hidden' },
     { name: t('CITIES_DROPDOWN', 'Cities dropdown'), type: 'hidden', path: 'business_listing_view.components.cities.hidden' }
   ]
 
@@ -65,20 +58,17 @@ export const AdvancedSettings = (props) => {
     { name: t('FAVORITE_BUTTON', 'Favorite button'), type: 'hidden', path: 'business_listing_view.components.business.components.favorite.hidden' },
     { name: t('OFFER_BADGE', 'Offer badge'), type: 'hidden', path: 'business_listing_view.components.business.components.offer.hidden' },
     { name: t('OFFER_BADGE_POSITION', 'Offer badge position'), type: 'position', path: 'business_listing_view.components.business.components.offer.position' },
-    { name: t('CATEGORIES', 'Categories'), type: 'hidden', path: 'business_listing_view.components.business.components.categories.hidden' },
     { name: t('FEATURED_BADGE', 'Featured badge'), type: 'hidden', path: 'business_listing_view.components.business.components.featured_badge.hidden' }
   ]
 
   const businessPageList = [
     { name: t('DEFAULT_BACKGROUND_COLOR', 'Default Background color'), type: 'color', path: 'business_view.components.style.backgroundColor' },
     { name: t('PRODUCTS_FROM_PREVIOUS_ORDERS_BLOCK', 'Products from previous orders block'), type: 'hidden', path: 'business_view.components.products_ordered.hidden' },
-    { name: t('NEAR_BUSINESS_BLOCK', 'Near business block'), type: 'hidden', path: 'business_view.components.near_business.hidden' },
-    { name: t('ORDER_VIEW_BUTTON', 'Order view button'), type: 'hidden', path: 'business_view.components.order_view_button.hidden' }
+    { name: t('NEAR_BUSINESS_BLOCK', 'Near business block'), type: 'hidden', path: 'business_view.components.near_business.hidden' }
   ]
 
   const businessInfoList = [
     { name: t('DESCRIPTION', 'Description'), type: 'hidden', path: 'business_view.components.information.components.description.hidden' },
-    { name: t('ABOUT', 'About'), type: 'hidden', path: 'business_view.components.information.components.about.hidden' },
     { name: t('VIDEOS', 'Videos'), type: 'hidden', path: 'business_view.components.information.components.videos.hidden' },
     { name: t('MENU_LIST_DELIVERY_TIME', 'Delivery time'), type: 'hidden', path: 'business_view.components.information.components.delivery_time.hidden' },
     { name: t('PICKUP_TIME', 'Pickup time'), type: 'hidden', path: 'business_view.components.information.components.pickup_time.hidden' },
@@ -206,7 +196,7 @@ export const AdvancedSettings = (props) => {
   return (
     <>
       <Container>
-        {isApp ? (
+        {isApp && (
           <BoxLayout>
             <h1>{t('CUSTOMER_APP_ADVANCED_SETTINGS', 'Customer App  Advanced Settings')}</h1>
             <h2>{t('HOMEPAGE', 'Homepage')}</h2>
@@ -219,21 +209,11 @@ export const AdvancedSettings = (props) => {
               handleChangePhoto={handleUpdateThemeValue}
             />
           </BoxLayout>
-        ) : (
-          <BoxLayout>
-            <h1>{t('WEBSITE_ADVANCED_SETTINGS', 'Website  Advanced Settings')}</h1>
-            <HomePageWrapper>
-              <h2>{t('HOMEPAGE', 'Homepage')}</h2>
-              <SettingComponent
-                settingList={homepageViewList}
-                handleUpdateThemeValue={handleUpdateThemeValue}
-                advancedValues={themeValuesRef?.current}
-                themeId={themesList?.themes?.[0]?.id}
-              />
-            </HomePageWrapper>
-          </BoxLayout>
         )}
         <BoxLayout>
+          {!isApp && (
+            <h1>{t('WEBSITE_ADVANCED_SETTINGS', 'Website  Advanced Settings')}</h1>
+          )}
           <h2>{t('BUTTONS', 'Buttons')}</h2>
           <SettingComponent
             settingList={buttonList}
@@ -242,14 +222,15 @@ export const AdvancedSettings = (props) => {
             themeStructure={themeStructure}
             themeId={themesList?.themes?.[0]?.id}
           />
-          <h3>{t('SHAPE', 'Shape')}</h3>
-          <ShadowWrapper>
-            <ButtonShadow
-              initialValues={themeValuesRef?.current?.general?.components?.buttons?.shadow?.components}
-              handleUpdateThemeValue={handleUpdateThemeValue}
-              path='general.components.buttons.shadow.components'
-            />
-          </ShadowWrapper>
+          <Button
+            color='primary'
+            outline
+            borderRadius='8px'
+            onClick={() => setIsOpenSound(true)}
+            className='custom'
+          >
+            {t('CUSTOM_SOUNDS', 'Custom sounds')}
+          </Button>
         </BoxLayout>
         <BoxLayout>
           <h2>{t('TIPOGRAPHY', 'Tipography')}</h2>
@@ -399,6 +380,8 @@ export const AdvancedSettings = (props) => {
             themeStructure={themeStructure}
             themeId={themesList?.themes?.[0]?.id}
           />
+        </BoxLayout>
+        <BoxLayout>
           <h3>{t('CONFIRMATION_PAGE', 'Confirmation page')}</h3>
           <h3>{t('ORDER_BLOCK', 'Order block')}</h3>
           <SettingComponent
@@ -408,6 +391,8 @@ export const AdvancedSettings = (props) => {
             themeStructure={themeStructure}
             themeId={themesList?.themes?.[0]?.id}
           />
+        </BoxLayout>
+        <BoxLayout>
           <h3>{t('POPUP_ADDRESS', 'Popup: Address')}</h3>
           <SettingComponent
             settingList={popupAddressList}
@@ -416,6 +401,8 @@ export const AdvancedSettings = (props) => {
             themeStructure={themeStructure}
             themeId={themesList?.themes?.[0]?.id}
           />
+        </BoxLayout>
+        <BoxLayout>
           <h3>{t('MY_ACCOUNT_PAGE', 'My account page')}</h3>
           <SettingComponent
             settingList={myAccountList}
@@ -424,6 +411,8 @@ export const AdvancedSettings = (props) => {
             themeStructure={themeStructure}
             themeId={themesList?.themes?.[0]?.id}
           />
+        </BoxLayout>
+        <BoxLayout>
           <h3>{t('MY_ORDERS', 'My orders')}</h3>
           <h3>{t('ACTIVE_ORDERS_BLOCK', 'Active Orders Block')}</h3>
           <SettingComponent
@@ -519,6 +508,16 @@ export const AdvancedSettings = (props) => {
           </Button>
         </ButtonWrapper>
       </Container>
+      <Modal
+        width='769px'
+        padding='25px'
+        open={isOpenSound}
+        onClose={() => setIsOpenSound(false)}
+      >
+        <UploadAudio
+          onClose={() => setIsOpenSound(false)}
+        />
+      </Modal>
       <Alert
         title={t('ORDERING', 'Ordering')}
         content={alertState.content}

package/src/components/MyProducts/AdvancedSettings/styles.js

@@ -27,10 +27,11 @@ export const BoxLayout = styled.div`
     margin-top: 0px;
     margin-bottom: 20px;
   }
+  button.custom {
+    height: 44px;
+  }
 `
 
-export const HomePageWrapper = styled.div``
-
 export const FormControlWithCheck = styled.div`
   > p {
     font-weight: 400;
@@ -69,15 +70,6 @@ export const HideCheckWrapper = styled.div`
   `}
 `
 
-export const ShadowWrapper = styled.div`
-  display: flex;
-  flex-direction: column;
-
-  @media (min-width: 576px) {
-    flex-direction: row;
-  }
-`
-
 export const InnerShadowWrapper = styled.div``
 
 export const DropShadowWrapper = styled.div`

package/src/components/MyProducts/OrderingWebsite/SelectBusiness.js

@@ -0,0 +1,47 @@
+import React, { useEffect, useState } from 'react'
+import { useLanguage, useUtils } from 'ordering-components-admin-external'
+import { useTheme } from 'styled-components'
+import { DefaultSelect as Select } from '../../../styles'
+import { SelectWrapper, Option } from './styles'
+
+export const SelectBusiness = (props) => {
+  const {
+    businessesList,
+    defaultValue,
+    onChange
+  } = props
+
+  const theme = useTheme()
+  const [, t] = useLanguage()
+  const [{ optimizeImage }] = useUtils()
+  const [businessOptions, setBusinessOptions] = useState([])
+
+  useEffect(() => {
+    if (businessesList?.loading || !businessesList?.businesses) return
+    const _businessOptions = []
+    businessesList.businesses.map(business => {
+      _businessOptions.push({
+        value: business?.slug,
+        content: (
+          <Option>
+            <img src={optimizeImage(business?.logo || theme.images?.dummies?.businessLogo, 'h_50,c_limit')} alt='' />
+            <span>{business?.name}</span>
+          </Option>
+        )
+      })
+    })
+    setBusinessOptions(_businessOptions)
+  }, [businessesList])
+
+  return (
+    <SelectWrapper>
+      <Select
+        placeholder={<Option>{t('SELECT_BUSINESS', 'Select business')}</Option>}
+        defaultValue={defaultValue}
+        options={businessOptions}
+        onChange={onChange}
+        optionInnerMaxHeight='300px'
+      />
+    </SelectWrapper>
+  )
+}

package/src/components/MyProducts/OrderingWebsite/SelectFranchise.js

@@ -0,0 +1,47 @@
+import React, { useEffect, useState } from 'react'
+import { useLanguage, useUtils } from 'ordering-components-admin-external'
+import { useTheme } from 'styled-components'
+import { DefaultSelect as Select } from '../../../styles'
+import { SelectWrapper, Option } from './styles'
+
+export const SelectFranchise = (props) => {
+  const {
+    franchisesList,
+    defaultValue,
+    onChange
+  } = props
+
+  const theme = useTheme()
+  const [, t] = useLanguage()
+  const [{ optimizeImage }] = useUtils()
+  const [options, setOptions] = useState([])
+
+  useEffect(() => {
+    if (franchisesList?.loading || !franchisesList?.franchises) return
+    const _options = []
+    franchisesList.franchises.map(franchise => {
+      _options.push({
+        value: franchise?.id,
+        content: (
+          <Option>
+            <img src={optimizeImage(franchise?.logo || theme.images?.dummies?.businessLogo, 'h_50,c_limit')} alt='' />
+            <span>{franchise?.name}</span>
+          </Option>
+        )
+      })
+    })
+    setOptions(_options)
+  }, [franchisesList])
+
+  return (
+    <SelectWrapper>
+      <Select
+        placeholder={<Option>{t('SELECT_FRANCHISE', 'Select a franchise')}</Option>}
+        defaultValue={defaultValue}
+        options={options}
+        onChange={onChange}
+        optionInnerMaxHeight='300px'
+      />
+    </SelectWrapper>
+  )
+}

package/src/components/MyProducts/OrderingWebsite/index.js

@@ -21,6 +21,8 @@ import Skeleton from 'react-loading-skeleton'
 import { AdvancedSettings } from '../AdvancedSettings'
 import { CustomDomain } from '../CustomDomain'
 import { bytesConverter } from '../../../utils'
+import { SelectBusiness } from './SelectBusiness'
+import { SelectFranchise } from './SelectFranchise'
 import {
   Container,
   HeaderTitleContainer,
@@ -48,7 +50,6 @@ import {
   HeaderInfoWrapper,
   InfoContent,
   RadioItem,
-  SlugWrapper,
   CustomeDomainDesc,
   TitleWrapper,
   CustomDomainInfo,
@@ -65,7 +66,9 @@ const OrderingWebsiteUI = (props) => {
     setAdvancedValues,
     themesList,
     site,
-    setSite
+    setSite,
+    businessesList,
+    franchisesList
   } = props
 
   const [, t] = useLanguage()
@@ -86,8 +89,8 @@ const OrderingWebsiteUI = (props) => {
   const [isCustomDomain, setIsCustomDomain] = useState(false)
 
   const settingsList = [
-    { key: 'basic', name: t('BASIC_SETTINGS', 'Basic Settings') },
-    { key: 'advanced', name: t('ADVANCED_SETTINGS', 'Advanced Settings') }
+    { key: 'basic', name: t('BASIC_SETTINGS', 'Basic Settings') }
+    // { key: 'advanced', name: t('ADVANCED_SETTINGS', 'Advanced Settings') }
   ]
 
   const handleClickImage = (type) => {
@@ -337,7 +340,8 @@ const OrderingWebsiteUI = (props) => {
                       {site?.domain && (
                         <>
                           {site?.ssl_status === 'issued' && (
-                            <CustomeDomainDesc>{t('CUSTOM_DOMAIN_STATUS_ISSUED', 'Your domain is now added , please verify the custom domain link above.')}</CustomeDomainDesc>)}
+                            <CustomeDomainDesc>{t('CUSTOM_DOMAIN_STATUS_ISSUED', 'Your domain is now added , please verify the custom domain link above.')}</CustomeDomainDesc>
+                          )}
                           {site?.ssl_status === 'pre-issued' && (
                             <CustomeDomainDesc>{t('CUSTOM_DOMAIN_STATUS_PRE_ISSUED', 'Process almost finish, please wait')}</CustomeDomainDesc>
                           )}
@@ -384,18 +388,11 @@ const OrderingWebsiteUI = (props) => {
                       <span>{t('REPORT_HEADER_FRANCHISES', 'Franchise')}</span>
                     </RadioItem>
                     {themeValues?.website_theme?.components?.type === 'franchise' && (
-                      <SlugWrapper>
-                        <label>{t('FRANCHISE_SLUG', 'Franchise slug')}</label>
-                        <Input
-                          name='name'
-                          placeholder={t('SLUG', 'Slug')}
-                          value={themeValues?.website_theme?.components?.franchise_slug || ''}
-                          onChange={e => handleChangeValue(e.target.value, 'website_theme', 'franchise_slug')}
-                          onKeyPress={e => {
-                            if (e.which === 32) { e.preventDefault() }
-                          }}
-                        />
-                      </SlugWrapper>
+                      <SelectFranchise
+                        defaultValue={themeValues?.website_theme?.components?.franchise_slug}
+                        franchisesList={franchisesList}
+                        onChange={value => handleChangeValue(value, 'website_theme', 'franchise_slug')}
+                      />
                     )}
 
                     <RadioItem
@@ -405,18 +402,11 @@ const OrderingWebsiteUI = (props) => {
                       <span>{t('SINGLE_STORE', 'Single Store')}</span>
                     </RadioItem>
                     {themeValues?.website_theme?.components?.type === 'single_store' && (
-                      <SlugWrapper>
-                        <label>{t('BUSINESS_SLUG', 'Business slug')}</label>
-                        <Input
-                          name='name'
-                          placeholder={t('SLUG', 'Slug')}
-                          value={themeValues?.website_theme?.components?.business_slug || ''}
-                          onChange={e => handleChangeValue(e.target.value, 'website_theme', 'business_slug')}
-                          onKeyPress={e => {
-                            if (e.which === 32) { e.preventDefault() }
-                          }}
-                        />
-                      </SlugWrapper>
+                      <SelectBusiness
+                        defaultValue={themeValues?.website_theme?.components?.business_slug}
+                        businessesList={businessesList}
+                        onChange={value => handleChangeValue(value, 'website_theme', 'business_slug')}
+                      />
                     )}
                   </>
                 )}
@@ -684,4 +674,4 @@ export const OrderingWebsite = (props) => {
     appId: 'website'
   }
   return <OrderingWebsiteController {...orderingWebsiteProps} />
-}
+}

package/src/components/MyProducts/OrderingWebsite/styles.js

@@ -441,10 +441,6 @@ export const InfoContent = styled.div`
     right: initial;
   `}
 
-  span {
-    display: block;
-  }
-
   > a {
     color: ${props => props.theme.colors.primary};
     margin: 0 5px;

package/src/components/MyProducts/UploadAudio/index.js

@@ -0,0 +1,168 @@
+import React, { useState, useRef, useEffect } from 'react'
+import { useLanguage, ExamineClick, DragAndDrop, UploadAudio as UploadAudioController } from 'ordering-components-admin-external'
+import { CloudUploadFill, FileMusicFill } from 'react-bootstrap-icons'
+import { Button, Input } from '../../../styles'
+import { bytesConverter } from '../../../utils'
+import { Alert } from '../../Shared'
+import {
+  Container,
+  FileUploadBox,
+  UploadIconBox,
+  Or,
+  FormControl,
+  ButtonGroup,
+  PdfIconBox
+} from './styles'
+import Skeleton from 'react-loading-skeleton'
+
+const UploadAudioUI = (props) => {
+  const { onClose, formState, changeFormState, handleUploadAudio } = props
+
+  const [, t] = useLanguage()
+  const [alertState, setAlertState] = useState({ open: false, content: [] })
+
+  const fileRef = useRef(null)
+
+  const closeAlert = () => {
+    setAlertState({
+      open: false,
+      content: []
+    })
+  }
+
+  const handleFiles = (files) => {
+    if (files.length === 1) {
+      const type = files[0].type
+      if (type?.split('/')[0] !== 'audio' && type !== 'audio/mpeg' && type !== 'audio/ogg') {
+        setAlertState({
+          open: true,
+          content: [t('ERROR_ONLY_AUDIO', 'Only audio files can be accepted')]
+        })
+        return
+      }
+
+      if (bytesConverter(files[0]?.size) > 512) {
+        setAlertState({
+          open: true,
+          content: [t('FILE_MAXIMUM_SIZE', 'The maximum file size is 500 kilobytes')]
+        })
+        return
+      }
+      const reader = new window.FileReader()
+      reader.readAsDataURL(files[0])
+      reader.onload = () => {
+        changeFormState({ file: reader.result, type: type === 'application/pdf' ? 'pdf' : 'image' })
+      }
+      reader.onerror = error => console.log(error)
+    }
+  }
+
+  const handleSendRequest = () => {
+    if (formState?.changes?.file || formState?.changes?.url) {
+      handleUploadAudio()
+      return
+    }
+    if (!formState?.changes?.file) {
+      setAlertState({
+        open: true,
+        content: t('AUDIO_FILE_IS_REQUIRED', 'Audio file is required!')
+      })
+      return
+    }
+    if (!formState?.changes?.url) {
+      setAlertState({
+        open: true,
+        content: t('URL_IS_REQUIRED', 'URL is required')
+      })
+    }
+  }
+
+  useEffect(() => {
+    if (formState?.error) {
+      setAlertState({
+        open: true,
+        content: formState.error
+      })
+    }
+  }, [formState?.error])
+
+  return (
+    <>
+      <Container>
+        <h2>{t('UPLOAD_YOUR_CUSTOM_SOUNDS', 'Upload your custom sounds')}</h2>
+        <p>{t('UPLOAD_CUSTOM_SOUNDS_DESC', 'Click to upload your custom sounds or share your custom sounds link')}</p>
+        <FileUploadBox onClick={() => fileRef.current.click()}>
+          {formState?.loading ? (
+            <Skeleton height={150} />
+          ) : (
+            <ExamineClick
+              onFiles={files => handleFiles(files)}
+              childRef={(e) => { fileRef.current = e }}
+              accept='.mp3, .aac, .ogg'
+            >
+              <DragAndDrop
+                onDrop={dataTransfer => handleFiles(dataTransfer.files)}
+                accept='.mp3, .aac, .ogg'
+              >
+                {formState?.changes?.file && (
+                  <PdfIconBox><FileMusicFill /></PdfIconBox>
+                )}
+                <UploadIconBox>
+                  <div>
+                    <CloudUploadFill />
+                    <p>{t('DRAG_AND_DROP', 'Drag and drop')}</p>
+                  </div>
+                </UploadIconBox>
+              </DragAndDrop>
+            </ExamineClick>
+          )}
+        </FileUploadBox>
+        <Or>{t('OR', 'Or')}</Or>
+        <FormControl>
+          <label>{t('SHARE_CUSTOM_SOUNDS_LINK', 'Share your custom sounds link')}</label>
+          {formState?.loading ? (
+            <Skeleton height={44} />
+          ) : (
+            <Input
+              placeholder={t('URL', 'URL')}
+              defaultValue={formState?.changes?.url}
+              onChange={(e) => changeFormState({ url: e.target.value })}
+            />
+          )}
+        </FormControl>
+        <ButtonGroup>
+          <Button
+            color='primary'
+            outline
+            onClick={onClose}
+          >
+            {t('CANCEL', 'Cancel')}
+          </Button>
+          <Button
+            color='primary'
+            onClick={() => handleSendRequest()}
+          >
+            {t('UPLOAD', 'Upload')}
+          </Button>
+        </ButtonGroup>
+      </Container>
+      <Alert
+        title={t('ORDERING', 'Ordering')}
+        content={alertState.content}
+        acceptText={t('ACCEPT', 'Accept')}
+        open={alertState.open}
+        onClose={() => closeAlert()}
+        onAccept={() => closeAlert()}
+        closeOnBackdrop={false}
+      />
+    </>
+  )
+}
+
+export const UploadAudio = (props) => {
+  const uploadAudioProps = {
+    ...props,
+    UIComponent: UploadAudioUI
+  }
+  return <UploadAudioController {...uploadAudioProps} />
+}