ordering-ui-admin-external 1.8.4 → 1.9.0

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

@@ -0,0 +1,119 @@
+import React, { useEffect, useState } from 'react'
+import Skeleton from 'react-loading-skeleton'
+import { useLanguage, useConfig, GoogleAutocompleteInput } from 'ordering-components-admin-external'
+import { Select } from '../../../styles/Select/FirstSelect'
+import { ArrowRight, Image } from 'react-bootstrap-icons'
+import { Button } from '../../../styles'
+import {
+  Container,
+  SelectWrapper,
+  Option,
+  ButtonWrapper,
+  SearchWrapper,
+  EmptyData
+} from './styles'
+
+export const RestaurantSelectGuide = (props) => {
+  const {
+    setBusiness,
+    businessList,
+    setStep,
+    onClose,
+    handleImport,
+    handleChangeAddress,
+    orderingBusiness,
+    isLoading,
+    business
+  } = props
+
+  const [, t] = useLanguage()
+  const [options, setOptions] = useState([])
+  const [{ configs }] = useConfig()
+
+  const googleMapsApiKey = configs?.google_maps_api_key?.value
+
+  const handleSubmit = () => {
+    setStep(3)
+    handleImport()
+  }
+
+  const handleSelectBusiness = (id) => {
+    const _business = businessList.find(item => item._id === id)
+    setBusiness(_business)
+  }
+
+  useEffect(() => {
+    const _options = businessList?.map(item => {
+      return {
+        value: item._id,
+        content: (
+          <Option>
+            {item?.logo_photos[0]
+              ? <img src={item.logo_photos[0]} alt='' />
+              : <Image />}
+            {item.name}
+          </Option>)
+      }
+    })
+    setOptions(_options)
+  }, [businessList])
+
+  return (
+    <Container>
+      <h2>{t('SELECT_YOUR_RESTAURANT_FROM_THIS_LIST', 'Select your restaurant from this list.')}</h2>
+      <SearchWrapper>
+        <label>{t('ADDRESS', 'Address')}</label>
+        <GoogleAutocompleteInput
+          name='address'
+          className='input-autocomplete'
+          apiKey={googleMapsApiKey}
+          placeholder={t('ADDRESS', 'Address')}
+          onChangeAddress={(e) => {
+            handleChangeAddress(e)
+          }}
+          defaultValue={orderingBusiness?.address ?? ''}
+          autoComplete='new-password'
+          countryCode={configs?.country_autocomplete?.value || '*'}
+        />
+      </SearchWrapper>
+      {isLoading && (
+        <SelectWrapper>
+          <label>
+            <Skeleton height={15} width={100} />
+          </label>
+          <Skeleton height={44} />
+        </SelectWrapper>
+      )}
+      {!isLoading && options?.length > 0 && (
+        <SelectWrapper>
+          <label>{t('SELECT_YOUR_RESTAURANT', 'Select your restaurant')}</label>
+          <Select
+            options={options}
+            className='select'
+            defaultValue={business?._id || ''}
+            placeholder={t('SELECT_BUSINESS', 'Select a Business')}
+            onChange={(value) => handleSelectBusiness(value)}
+            searchBarIsCustomLayout
+            searchBarIsNotLazyLoad
+          />
+        </SelectWrapper>
+      )}
+      {!isLoading && options.length === 0 && (
+        <EmptyData>
+          {t('NO_RESULT', 'There are no results')}
+        </EmptyData>
+      )}
+      <ButtonWrapper>
+        <span onClick={() => onClose()}>{t('SKIP', 'Skip')}</span>
+        <Button
+          color='primary'
+          onClick={handleSubmit}
+          disabled={!business?._id}
+        >
+          {t('CONTINUE', 'Continue')}
+          <ArrowRight />
+        </Button>
+      </ButtonWrapper>
+    </Container>
+  )
+}

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

@@ -0,0 +1,150 @@
+import styled from 'styled-components'
+import { darken } from 'polished'
+
+export const Container = styled.div`
+  h2 {
+    font-weight: 600;
+    font-size: 24px;
+    line-height: 36px;
+    text-align: center;
+    margin: 0;
+  }
+`
+
+export const SelectWrapper = styled.div`
+  margin-top: 30px;
+
+  label {
+    font-weight: 400;
+    font-size: 14px;
+    line-height: 24px;
+    margin-bottom: 10px;
+  }
+
+  > div {
+    width: 100%;
+    border: none;
+
+    > div:first-child {
+      background-color: ${props => props.theme.colors.secundary};
+      height: 43px;
+      border: none;
+      border-radius: 7.6px;
+      font-weight: 400;
+      font-size: 14px;
+      line-height: 24px;
+      color: ${props => props.theme.colors.secundaryContrast};
+    }
+    .list {
+      background-color: ${props => props.theme.colors.secundary};
+      border: none;
+      
+      .search-bar-container {
+        padding: 10px;
+        input {
+          background-color: transparent;
+          height: 44px;
+        }
+      }
+
+      .list-wrapper {
+        max-height: 200px;
+        > div {
+          padding: 6px 10px;
+          &:hover {
+            background-color: #f2f5f7;
+          }
+        }
+      }
+    }
+  }
+`
+
+export const Option = styled.div`
+  display: flex;
+  align-items: center;
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 24px;
+  color: ${props => props.theme.colors.secundaryContrast};
+  img {
+    width: 24px;
+    height: 24px;
+    border-radius: 7px;
+    margin-right: 10px;
+  }
+  svg {
+    font-size: 24px;
+    border-radius: 7px;
+    margin-right: 10px;
+  }
+`
+
+export const ButtonWrapper = styled.div`
+  margin-top: 60px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  span {
+    font-weight: 600;
+    font-size: 16px;
+    line-height: 24px;
+    cursor: pointer;
+  }
+  button {
+    min-width: 300px;
+    border-radius: 8px;
+    height: 44px;
+    position: relative;
+    svg {
+      position: absolute;
+      right: 15px;
+      top: 10px;
+      font-size: 21px;
+    }
+  }
+`
+
+export const SearchWrapper = styled.div`
+  label {
+    font-weight: 400;
+    font-size: 14px;
+    line-height: 24px;
+    margin-bottom: 12px;
+  }
+  input {
+    width: 100%;
+    height: 44px;
+  }
+  .input-autocomplete {
+    width: 100%;
+    background: ${props => props.theme.colors?.backgroundPage || '#FFF'};
+    border: 1px solid ${props => props.theme.colors.borderColor};
+    border-radius: 8px;
+    font-size: 14px;
+    padding: 10px 15px;
+    outline: none;
+    ::placeholder {
+      color: ${props => props.theme.colors.secundaryLight};
+    }
+
+    &:-ms-input-placeholder {
+      color: ${props => props.theme.colors.secundaryLight};
+    }
+
+    &::-ms-input-placeholder { /* Microsoft Edge */
+      color: ${props => props.theme.colors.secundaryLight};
+    }
+    &:focus {
+      border-color: ${() => darken(0.07, '#CCC')};
+    }
+  }
+`
+
+export const EmptyData = styled.p`
+  font-weight: 600;
+  font-size: 16px;
+  line-height: 24px;
+  text-align: center;
+  margin-top: 30px;
+`

package/src/components/Stores/index.js

@@ -1,3 +1,4 @@
+import { BusinessAdd } from './BusinessAdd'
 import { BusinessBrandListing } from './BusinessBrandListing'
 import { BusinessesListing } from './BusinessesListing'
 import { BusinessProductsListing } from './BusinessProductsListing'
@@ -101,6 +102,7 @@ import { ServiceDetail } from './ServiceDetail'
 import { ProductVideos } from './ProductVideos'
 
 export {
+  BusinessAdd,
   BusinessBrandListing,
   BusinessesListing,
   BusinessProductsListing,

package/src/index.js

@@ -278,6 +278,7 @@ import {
   ProductMainDetails,
   BusinessSharedMenuProductDetails,
   BusinessSpreadSheet,
+  BusinessAdd,
   SingleBusinessProduct,
   BusinessTypeDetail,
   ProductDetatilsInformation,
@@ -615,6 +616,7 @@ export {
   BusinessDetails,
   BusinessFrontLayout,
   BusinessMenu,
+  BusinessAdd,
   BusinessNotifications,
   BusinessOrderingChannels,
   BusinessPaymentMethods,

package/template/app.js

@@ -71,6 +71,7 @@ import { QueryLogin } from '../src/components/Login'
 import { PluginSettings } from './pages/PluginSettings'
 import { Profile } from './pages/Profile'
 import settings from './config.json'
+import { BusinessAdd } from './pages/BusinessAdd'
 
 export const App = () => {
   const [{ auth, loading, user }] = useSession()
@@ -231,6 +232,9 @@ export const App = () => {
                     <ProtectedRoute path='/stores/brand' allowedLevels={[0]}>
                       <BrandManager />
                     </ProtectedRoute>
+                    <ProtectedRoute path='/stores/add' allowedLevels={[0, 2]}>
+                      <BusinessAdd />
+                    </ProtectedRoute>
 
                     <ProtectedRoute path='/users/customers' allowedLevels={[0]}>
                       <CustomersList />

package/template/components/ListenPageChanges/index.js

@@ -21,6 +21,7 @@ export const ListenPageChanges = ({ children }) => {
     professionals: '/users/professionals',
     login: '/login',
     businesses: '/stores/list',
+    business_add: '/stores/add',
     brand: '/stores/brand',
     store: '/stores/products/:store?',
     basic_settings: '/settings/basic',

package/template/helmetdata.json

@@ -55,6 +55,13 @@
     "robots": "index, follow",
     "canonicalUrl": ""
   },
+  "business_add": {
+    "title": "Business Add",
+    "description": "a dummy description about this page",
+    "keywords": "test, dummy, data",
+    "robots": "index, follow",
+    "canonicalUrl": ""
+  },
   "brand": {
     "title": "Businesse Brand",
     "description": "a dummy description about this page",

package/template/pages/BusinessAdd/index.js

@@ -0,0 +1,11 @@
+import React from 'react'
+import { HelmetTags } from '../../components/HelmetTags'
+import { BusinessAdd as BusinessAddController } from '../../../src/components/Stores'
+export const BusinessAdd = (props) => {
+  return (
+    <>
+      <HelmetTags page='business_add' />
+      <BusinessAddController {...props} />
+    </>
+  )
+}