ordering-ui-admin-external 1.23.4 → 1.24.0

package/src/components/Delivery/DriversCompanyAddForm/ScheduleForm/index.js

@@ -0,0 +1,29 @@
+import React from 'react'
+import { Schedule } from '../../../Shared'
+import { useLanguage } from 'ordering-components-admin-external'
+
+import {
+  ScheduleContainer,
+  ScheduleInnerContainer
+} from './styles'
+
+export const ScheduleForm = (props) => {
+  const {
+    handleChangeScheduleState
+  } = props
+
+  const [, t] = useLanguage()
+
+  return (
+    <>
+      <ScheduleContainer>
+        <h2>{t('SCHEDULE', 'Schedule')}</h2>
+        <ScheduleInnerContainer>
+          <Schedule
+            handleChangeScheduleState={handleChangeScheduleState}
+          />
+        </ScheduleInnerContainer>
+      </ScheduleContainer>
+    </>
+  )
+}

package/src/components/Delivery/DriversCompanyAddForm/ScheduleForm/styles.js

@@ -0,0 +1,11 @@
+import styled from 'styled-components'
+
+export const ScheduleContainer = styled.div`
+  > button {
+    margin: 30px 0 20px;
+    height: 44px;
+  }
+`
+
+export const ScheduleInnerContainer = styled.div`
+`

package/src/components/Delivery/DriversCompanyAddForm/WebhooksForm/index.js

@@ -0,0 +1,69 @@
+import React from 'react'
+import { useLanguage } from 'ordering-components-admin-external'
+import { Input } from '../../../../styles'
+import { useFormContext } from 'react-hook-form'
+
+import {
+  FormContainer,
+  InputWrapper
+} from './styles'
+
+export const WebhooksForm = (props) => {
+  const {
+    changesState,
+    handleChangesState
+  } = props
+
+  const [, t] = useLanguage()
+  const { register } = useFormContext()
+
+  return (
+    <>
+      <FormContainer>
+        <h2>{t('WEBHOOKS', 'Webhooks')}</h2>
+        <InputWrapper>
+          <label>{t('WEBHOOK_NEW_ORDER', 'Webhook new order')}</label>
+          <Input
+            name='webhook_new_order'
+            defaultValue={changesState?.webhook_new_order ?? ''}
+            onChange={e => handleChangesState('webhook_new_order', e.target.value)}
+            placeholder={t('WEBHOOK_NEW_ORDER', 'Webhook new order')}
+            ref={register({
+              required: t(
+                'VALIDATION_ERROR_REQUIRED',
+                'Name is required'
+              ).replace('_attribute_', t('WEBHOOK_NEW_ORDER', 'Webhook new order'))
+            })}
+            autoComplete='off'
+          />
+        </InputWrapper>
+        <InputWrapper>
+          <label>{t('WEBHOOK_CANCEL_REQUEST', 'Webhook cancel request')}</label>
+          <Input
+            name='webhook_cancel_request'
+            defaultValue={changesState?.webhook_cancel_request ?? ''}
+            onChange={e => handleChangesState('webhook_cancel_request', e.target.value)}
+            placeholder={t('WEBHOOK_CANCEL_REQUEST', 'Webhook cancel request')}
+            ref={register({
+              required: t(
+                'VALIDATION_ERROR_REQUIRED',
+                'Name is required'
+              ).replace('_attribute_', t('WEBHOOK_CANCEL_REQUEST', 'Webhook cancel request'))
+            })}
+            autoComplete='off'
+          />
+        </InputWrapper>
+        <InputWrapper>
+          <label>{t('WEBHOOK_ORDER_STATUS_CHANGED', 'Webhook order status changed')}</label>
+          <Input
+            name='webhook_order_status_changed'
+            defaultValue={changesState?.webhook_order_status_changed ?? ''}
+            onChange={e => handleChangesState('webhook_order_status_changed', e.target.value)}
+            placeholder={t('WEBHOOK_ORDER_STATUS_CHANGED', 'Webhook order status changed')}
+            autoComplete='off'
+          />
+        </InputWrapper>
+      </FormContainer>
+    </>
+  )
+}

package/src/components/Delivery/DriversCompanyAddForm/WebhooksForm/styles.js

@@ -0,0 +1,24 @@
+import styled from 'styled-components'
+
+export const FormContainer = styled.div``
+
+export const InputWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  margin-bottom: 35px;
+
+  label {
+    font-size: 14px;
+  }
+
+  div {
+    font-size: 14px;
+  }
+
+  .select {
+    padding-top: 4px;
+    padding-bottom: 4px;
+    border: none;
+    background-color: ${props => props.theme.colors.secundary};
+  }
+`

package/src/components/Delivery/DriversCompanyAddForm/index.js

@@ -0,0 +1,121 @@
+import React, { useState, useEffect } from 'react'
+import {
+  useLanguage,
+  DriversCompanyDetails as DriversCompanyDetailsController
+} from 'ordering-components-admin-external'
+import { useForm, FormProvider } from 'react-hook-form'
+import { Alert } from '../../Shared'
+import { Button } from '../../../styles'
+import { GeneralForm } from './GeneralForm'
+import { ScheduleForm } from './ScheduleForm'
+import { WebhooksForm } from './WebhooksForm'
+
+import {
+  Container,
+  SectionContainer,
+  ButtonsContainer
+} from './styles'
+
+const DriversCompanyAddFormUI = (props) => {
+  const {
+    changesState,
+    actionState,
+    cleanActionState,
+    handleAddDriversCompany
+  } = props
+
+  const [, t] = useLanguage()
+  const formMethods = useForm()
+
+  const [alertState, setAlertState] = useState({ open: false, content: [] })
+
+  const closeAlert = () => {
+    cleanActionState()
+    setAlertState({
+      open: false,
+      content: []
+    })
+  }
+
+  useEffect(() => {
+    if (!actionState.loading && actionState.error) {
+      setAlertState({
+        open: true,
+        content: actionState.error || [t('ERROR')]
+      })
+    }
+  }, [actionState])
+
+  useEffect(() => {
+    if (Object.keys(formMethods.errors).length > 0) {
+      setAlertState({
+        open: true,
+        content: Object.values(formMethods.errors).map((error) => error.message)
+      })
+    }
+  }, [formMethods.errors])
+
+  const onSubmit = () => {
+    if (!(changesState?.timezone)) {
+      setAlertState({
+        open: true,
+        content: t(
+          'VALIDATION_ERROR_REQUIRED',
+          'Name is required'
+        ).replace('_attribute_', t('TIMEZONE', 'Timezone'))
+      })
+      return
+    }
+    handleAddDriversCompany()
+  }
+
+  return (
+    <FormProvider {...formMethods}>
+      <Container onSubmit={formMethods.handleSubmit(onSubmit)}>
+        <SectionContainer>
+          <GeneralForm {...props} />
+        </SectionContainer>
+        <SectionContainer>
+          <ScheduleForm {...props} />
+        </SectionContainer>
+        <SectionContainer>
+          <WebhooksForm {...props} />
+        </SectionContainer>
+        <ButtonsContainer>
+          <Button
+            color='secundary'
+            onClick={() => props.onClose()}
+            type='button'
+          >
+            {t('CANCEL', 'Cancel')}
+          </Button>
+          <Button
+            borderRadius='8px'
+            color='primary'
+            type='submit'
+            disabled={Object.keys(changesState).length === 0}
+          >
+            {t('SAVE', 'Save')}
+          </Button>
+        </ButtonsContainer>
+      </Container>
+      <Alert
+        title={t('ERROR')}
+        content={alertState.content}
+        acceptText={t('ACCEPT')}
+        open={alertState.open}
+        onClose={() => closeAlert()}
+        onAccept={() => closeAlert()}
+        closeOnBackdrop={false}
+      />
+    </FormProvider>
+  )
+}
+
+export const DriversCompanyAddForm = (props) => {
+  const driversCompanyDetailsProps = {
+    ...props,
+    UIComponent: DriversCompanyAddFormUI
+  }
+  return <DriversCompanyDetailsController {...driversCompanyDetailsProps} />
+}

package/src/components/Delivery/DriversCompanyAddForm/styles.js

@@ -0,0 +1,39 @@
+import styled from 'styled-components'
+
+export const Container = styled.form`
+  h2 {
+    font-weight: 600;
+    font-size: 16px;
+    line-height: 24px;
+    margin: 0 0 29px 0;
+  }
+`
+
+export const SectionContainer = styled.div`
+  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.12);
+  border-radius: 7.6px;
+  padding: 25px 38px;
+  margin: 25px 20px 34px 20px;
+
+  > div {
+    max-width: 1024px;
+  }
+`
+export const ButtonsContainer = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  padding: 20px;
+  position: sticky;
+  z-index: 100;
+  bottom: 0;
+  background-color: ${props => props.theme.colors.backgroundPage};
+
+  > button {
+    border-radius: 8px;
+    height: 44px;
+    &:first-child {
+      margin: 0 10px;
+    }
+  }
+`

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/CustomDomain/index.js

@@ -0,0 +1,137 @@
+import React, { useState } from 'react'
+import { useLanguage, useConfig, CustomDomain as CustomDomainController } from 'ordering-components-admin-external'
+import { Select } from '../../../styles/Select/FirstSelect'
+import { CheckSquareFill as CheckedIcon, Square as UnCheckedIcon } from 'react-bootstrap-icons'
+import { Button, Input } from '../../../styles'
+import { Alert } from '../../Shared'
+import {
+  Container,
+  FormControl,
+  SelectWrapper,
+  Option,
+  ButtonGroup,
+  CheckBoxWrapper
+} from './styles'
+
+const CustomDomainUI = (props) => {
+  const {
+    handleChangeFormState,
+    formState,
+    onClose,
+    handleChangeCustomDomain
+  } = props
+
+  const [, t] = useLanguage()
+  const [{ configs }] = useConfig()
+
+  const [showMapInput, setShowMapInput] = useState(false)
+  const [googleMapKey, setGoogleMapKey] = useState('')
+  const [alertState, setAlertState] = useState({ open: false, content: [] })
+
+  const sslTypeList = [
+    // { value: 'none', content: <Option>{t('NONE', 'None')}</Option> },
+    { value: 'automatic', content: <Option>{t('AUTOMATIC', 'automatic')}</Option> },
+    { value: 'proxy', content: <Option>{t('PROXY', 'Proxy')} (Cloudflare)</Option> }
+  ]
+
+  const handleSubmit = () => {
+    const errors = []
+    if (!configs?.google_maps_api_key?.value && !(showMapInput && googleMapKey)) {
+      errors.push(t('VALIDATION_ERROR_REQUIRED', 'Name is required').replace('_attribute_', t('GOOGLE_MAP_API_KEY', 'Google map api key')))
+    }
+    if (!formState?.changes?.domain) errors.push(t('VALIDATION_ERROR_REQUIRED', 'Name is required').replace('_attribute_', t('DOMAIN', 'Domain')))
+    if (formState?.changes?.domain &&
+      !formState?.changes?.domain.match(/^([a-z0-9]+(-[a-z0-9]+)*\.)+[a-z]{2,}$/i)) {
+      errors.push(t('VALIDATION_ERROR_DOMAIN', 'The domain is not valid'))
+    }
+    if (!formState?.changes?.ssl_setup_type) errors.push(t('VALIDATION_ERROR_REQUIRED', 'Name is required').replace('_attribute_', t('SSL_SETUP_TYPE', 'SSL setup type')))
+
+    if (errors.length === 0) {
+      const googleMapApiKey = showMapInput && googleMapKey
+      handleChangeCustomDomain(googleMapApiKey)
+    } else {
+      setAlertState({ open: true, content: errors })
+    }
+  }
+
+  const closeAlert = () => {
+    setAlertState({
+      open: false,
+      content: []
+    })
+  }
+
+  return (
+    <>
+      <Container>
+        <h1>{t('CUSTOM_DOMAIN', 'Custom domain')}</h1>
+        <FormControl>
+          <label>{t('DOMAIN', 'Domain')}</label>
+          <Input
+            placeholder='www.yourdomain.com'
+            value={formState?.changes?.domain || ''}
+            onChange={(e) => handleChangeFormState({ domain: e.target.value })}
+          />
+        </FormControl>
+        <FormControl>
+          <label>{t('SLL_SETUP_TYPE', 'SSL setup type')}</label>
+          <SelectWrapper>
+            <Select
+              options={sslTypeList}
+              className='select'
+              defaultValue={formState?.changes?.ssl_setup_type}
+              placeholder={t('SELECT_OPTION', 'Select an option')}
+              onChange={(value) => handleChangeFormState({ ssl_setup_type: value })}
+            />
+          </SelectWrapper>
+        </FormControl>
+        <CheckBoxWrapper onClick={() => setShowMapInput(prev => !prev)}>
+          {showMapInput ? <CheckedIcon className='active' /> : <UnCheckedIcon />}
+          <span>{t('I_HAVE_GOOGLE_MAPS_KEY_WANT_SHARE_IT', 'I have my Google Maps API Key, I want to share it')}</span>
+        </CheckBoxWrapper>
+        {showMapInput && (
+          <FormControl>
+            <label>{t('GOOGLE_MAP_API_KEY', 'Google map api key')}</label>
+            <Input
+              value={googleMapKey}
+              onChange={(e) => setGoogleMapKey(e.target.value)}
+            />
+          </FormControl>
+        )}
+        <ButtonGroup>
+          <Button
+            color='primary'
+            outline
+            onClick={onClose}
+          >
+            {t('Cancel', 'Cancel')}
+          </Button>
+          <Button
+            color='primary'
+            onClick={handleSubmit}
+            disabled={formState?.loading}
+          >
+            {t('SAVE', 'Save')}
+          </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 CustomDomain = (props) => {
+  const customDomainProps = {
+    ...props,
+    UIComponent: CustomDomainUI
+  }
+  return <CustomDomainController {...customDomainProps} />
+}