ordering-ui-admin-external 1.17.0 → 1.19.0

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

@@ -0,0 +1,248 @@
+import styled, { css } from 'styled-components'
+import { darken } from 'polished'
+
+export const Container = styled.div`
+  padding: 20px;
+  overflow: auto;
+  transition: 0.3s;
+  
+  > button {
+    height: 42px;
+    width: 100%;
+    margin-top: 20px;
+  }
+  
+  @media (min-width: 1000px) {
+    max-width: 500px;
+    width: 0;
+    ${props => props.theme?.rtl ? css`
+      border-right: 1px solid ${props => props.theme.colors.borderColor};
+    ` : css`
+      border-left: 1px solid ${props => props.theme.colors.borderColor};
+    `}
+  }
+`
+
+export const Header = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  position: relative;
+  h1 {
+    font-size: 20px;
+    font-weight: 700;
+    margin: 5px 0;
+    color: ${props => props.theme.colors.headingColor};
+
+    ${props => props.theme?.rtl ? css`
+      margin-left: 80px;
+    ` : css`
+      margin-right: 80px;
+    `}
+  }
+`
+
+export const ActionBlock = styled.div`
+  background: ${props => props.theme.colors?.backgroundPage || '#FFF'};
+  position: absolute;
+  z-index: 1000;
+  display: flex;
+  align-items: center;
+  > button {
+    display: none;
+  }
+
+  ${props => props.theme?.rtl ? css`
+    left: 0px;
+  ` : css`
+    right: 0px;
+  `}
+
+  @media (min-width: 1000px) {
+    > button {
+      display: block;
+      ${props => props.theme?.rtl ? css`
+        margin-right: 10px;
+      ` : css`
+        margin-left: 10px;
+      `}
+    }
+  }
+`
+
+export const ActionSelectorWrapper = styled.div`
+  button {
+    display: flex;
+    background: transparent !important;
+    border: none;
+    padding: 5px;
+    border-radius: 8px;
+
+    &:active,
+    &:focus {
+      border-color: unset !important;
+      box-shadow: none !important;
+    }
+    svg {
+      color: ${props => props.theme.colors.headingColor};
+      font-size: 20px;
+    }
+
+    &:after {
+      display: none;
+    }
+
+    &:hover {
+      background: ${props => darken(0.04, props.theme.colors.secundary)} !important;
+    }
+    &:active {
+      background: ${props => darken(0.1, props.theme.colors.secundaryDarkContrast)} !important;
+    }
+  }
+
+  .show {
+    >div {
+      border: 1px solid ${props => props.theme.colors.borderColor};
+      box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.12);
+    }
+  }
+
+  > div {
+    > div {
+      border-radius: 8px;
+      .dropdown-item {
+        font-size: 12px;
+        color: ${props => props.theme.colors.headingColor};
+        padding: 7px 20px;
+        &:active {
+          background: ${props => darken(0.1, props.theme.colors.secundary)} !important;
+        }
+      }
+      .dropdown-item:last-child {
+        color: ${props => props.theme.colors.danger};
+      }
+    }
+  }
+`
+
+export const Content = styled.form`
+  margin-top: 30px;
+  label {
+    font-weight: 400;
+    font-size: 14px;
+    margin-bottom: 10px;
+  }
+  input {
+    height: 44px;
+    width: 100%;
+  }
+`
+
+export const ButtonWrapper = styled.div`
+  position: sticky;
+  top: 100%;
+
+  button {
+    height: 44px;
+  }
+`
+
+export const HideSubmitBtn = styled.button`
+  display: none;
+`
+
+export const OptionList = styled.div`
+  margin-top: 35px;
+`
+
+export const AddBtn = styled.span`
+  font-weight: 400;
+  font-size: 14px;
+  display: block;
+  margin: 10px 0px;
+  cursor: pointer;
+  user-select: none;
+  color: ${props => props.theme.colors.lightGray};
+  transition: color 0.2s ease;
+
+  &:hover {
+    color: ${props => props.theme.colors.primary};
+  }
+`
+
+export const CheckWrapper = styled.div`
+  display: flex;
+  align-items: center;
+
+  .check-box {
+    cursor: pointer !important;
+  }
+
+  span {
+    svg {
+      cursor: pointer !important;
+      font-size: 16px;
+      color: ${props => props.theme.colors.secundaryLight};
+
+      &.active {
+        color: ${props => props.theme.colors.primary};
+      }
+    }
+  }
+
+  > label {
+    margin-bottom: 0;
+    display: flex;
+    align-items: center;
+    font-size: 14px;
+    margin-left: 20px;
+    ${props => props.theme.rtl && css`
+      margin-right: 20px;
+      margin-left: 0px;
+    `}
+  }
+`
+
+export const PlaceItemContainer = styled.div`
+  display: flex;
+  align-items: center;
+  padding: 12px 0;
+  border-bottom: 1px solid ${props => props.theme.colors.borderColor};
+  border-top: 1px solid transparent;
+  justify-content: space-between;
+  transition: all 0.3s linear;
+  cursor: pointer;
+
+  &:hover {
+    background: ${props => props.theme.colors.secundary};
+  }
+
+  ${({ active }) => active && css`
+    background: ${props => props.theme.colors.backgroundInfo};
+    border-top: 1px solid ${props => props.theme.colors.primary};
+    border-bottom: 1px solid ${props => props.theme.colors.primary};
+  `}
+
+  ${({ notAllow }) => notAllow && css`
+    cursor: not-allowed;
+    * {
+      cursor: not-allowed;
+    }
+  `}
+
+  > svg {
+    font-size: 16px;
+    color: ${props => props.theme.colors.secundaryLight};
+  }
+`
+
+export const TableHead = styled.div`
+  display: flex;
+  align-items: center;
+  padding-bottom: 8px;
+  border-bottom: 1px solid ${props => props.theme.colors.secundaryLight};
+
+  label {
+    font-weight: 700;
+  }
+`

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

@@ -195,7 +195,7 @@ export const BusinessProductList = (props) => {
           </ProductListContainer>
           <ProductListBottom>
             {
-              !businessState.loading && businessState?.business?.categories?.length > 0 && (
+              !businessState.loading && businessState?.business?.categories?.length > 0 && categorySelected && (
                 <AddProductBtn
                   onClick={() => handleParentProductAdd(true)}
                 >
@@ -224,6 +224,14 @@ export const BusinessProductList = (props) => {
               </WrapperNotFound>
             )
           }
+
+          {
+            !businessState.loading && businessState?.business?.categories?.length > 0 && !categorySelected && (
+              <WrapperNotFound>
+                {t('SELECT_CATEGORY_BEFORE_PRODUCT', 'Please select a category before adding your products.')}
+              </WrapperNotFound>
+            )
+          }
         </>
       )}
 

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

@@ -534,6 +534,7 @@ const BusinessProductsListingUI = (props) => {
           onClose={() => setShowPopup(false)}
           orderingBusiness={businessState?.business}
           getBusiness={getBusiness}
+          handleOpenCategoryDetails={handleOpenCategoryDetails}
         />
       </Modal>
       <Modal

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

@@ -37,7 +37,8 @@ export const BusinessSummary = (props) => {
     handleSelectedItem,
     handleDuplicateBusiness,
     handleDeleteBusiness,
-    extraOpen
+    extraOpen,
+    spoonityConfig
   } = props
   const [, t] = useLanguage()
   const [{ optimizeImage }] = useUtils()
@@ -58,7 +59,7 @@ export const BusinessSummary = (props) => {
     window.open(`https://${ordering.project}.tryordering.com/store/${businessState?.business?.slug}`, '_blank')
   }
 
-  const itemsExcluded = ['publishing']
+  const itemsExcluded = !!spoonityConfig ? ['publishing'] : ['publishing', 'spoonity_key']
 
   const businessConfigs = [
     {
@@ -124,6 +125,13 @@ export const BusinessSummary = (props) => {
     {
       key: 'webhooks',
       value: t('WEBHOOKS', 'Webhooks')
+    },
+    {
+      key: 'places',
+      value: t('PLACES', 'Places')
+    }, {
+      key: 'spoonity_key',
+      value: t('SPOONITY_KEY', 'Sponity key')
     }
   ]
 
@@ -177,7 +185,7 @@ export const BusinessSummary = (props) => {
           <RightHeader>
             <IconButton
               disabled
-              // onClick={() => handleSelectedItem('support')}
+            // onClick={() => handleSelectedItem('support')}
             >
               <LifePreserver />
             </IconButton>
@@ -271,7 +279,9 @@ export const BusinessSummary = (props) => {
           </BusinessDescription>
           <BusinessConfigsContainer isLoading={businessState?.loading}>
             {(isAdmin
-              ? businessConfigs
+              ? !!spoonityConfig
+                ? businessConfigs
+                : businessConfigs.filter(configs => configs.key !== 'spoonity_key')
               : businessConfigs.filter(c => !itemsExcluded.includes(c.key))
             ).map(config => (
               <BusinessConfigItem
@@ -282,7 +292,8 @@ export const BusinessSummary = (props) => {
                 <span>{config.value}</span>
                 <BsChevronRight />
               </BusinessConfigItem>
-            ))}
+            )
+            )}
           </BusinessConfigsContainer>
         </BusinessDetailsContent>
       </BusinessDetailsContainer>

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

@@ -24,7 +24,8 @@ const ProductStepUI = (props) => {
     business,
     isLoading,
     orderingBusiness,
-    countriesState
+    countriesState,
+    handleOpenCategoryDetails
   } = props
 
   const theme = useTheme()
@@ -39,6 +40,11 @@ const ProductStepUI = (props) => {
     onClose()
   }
 
+  const handleAddManuallyProduct = () => {
+    onClose()
+    handleOpenCategoryDetails()
+  }
+
   return (
     <Container>
       {step === 1 && <ProductStartGuide onClose={onClose} setStep={setStep} setOption={setOption} countriesState={countriesState} />}
@@ -63,7 +69,7 @@ const ProductStepUI = (props) => {
           </ImageContent>
         </ImportMenuContainer>
       )}
-      {step === 3 && option === 2 && !actionState?.loading && (
+      {step === 3 && option === 2 && !actionState?.loading && actionState?.content?.products > 0 && (
         <ImportMenuContainer>
           <h2>{t('YOUR_MENU_HAS_BEEN_IMPORTED', 'Your menu has been imported')}</h2>
           <ImageContent>
@@ -74,6 +80,17 @@ const ProductStepUI = (props) => {
           </ButtonWrapper>
         </ImportMenuContainer>
       )}
+      {step === 3 && option === 2 && !actionState?.loading && actionState?.content?.products === 0 && (
+        <ImportMenuContainer>
+          <h2>{t('YOUR_MENU_COULDNT__BE_IMPORTED', 'Your menu couldn\'t be imported')}</h2>
+          <ImageContent>
+            <img src={theme.images.general.importMenu} alt='' />
+          </ImageContent>
+          <ButtonWrapper>
+            <Button color='primary' onClick={handleAddManuallyProduct}>{t('ADD_PRODUCTS_MANUALLY', 'Add products manually')}</Button>
+          </ButtonWrapper>
+        </ImportMenuContainer>
+      )}
       {step === 2 && option === 3 && (
         <UploadMenuGuide
           handleBack={() => setStep(1)}

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

@@ -0,0 +1,87 @@
+import React, { useEffect, useState } from 'react'
+import { useLanguage } from 'ordering-components-admin-external'
+import { Button, Input } from '../../../styles'
+import { Alert } from '../../Shared'
+
+import {
+  BusinessOrderingChannelsContainer,
+  Title,
+  BusinessCustomSlugContainer,
+  FormControl,
+  Label,
+} from './styles'
+
+export const SpoonityApiKey = (props) => {
+  const {
+    spoonityConfig,
+    handleUpdateSpoonityKey,
+    spoonityKeyState
+  } = props
+
+  const [, t] = useLanguage()
+  const [spoonityKey, setSpoonityKey] = useState(spoonityConfig?.value)
+  const [alertState, setAlertState] = useState({ open: false, content: [], success: false })
+
+  const changeSpoonityKey = () => {
+    if (spoonityKey === '') {
+      setAlertState({
+        ...alertState,
+        open: true,
+        content: [t('SPOONITY_KEY_REQUIRED', 'Spoonity key is required')]
+      })
+      return
+    }
+    handleUpdateSpoonityKey(spoonityKey, spoonityConfig.id)
+  }
+
+  const closeAlert = () => {
+    setAlertState({
+      ...alertState,
+      open: false,
+      content: []
+    })
+  }
+
+  useEffect(() => {
+    if (spoonityKeyState?.key && !spoonityKeyState?.loading) setSpoonityKey(spoonityKey)
+  }, [spoonityKeyState?.key, spoonityKeyState?.loading])
+
+  useEffect(() => {
+    if(!spoonityKeyState?.key) return
+    setSpoonityKey(spoonityKeyState?.key)
+  }, [spoonityKeyState?.key])
+
+  return (
+    <>
+      <BusinessOrderingChannelsContainer>
+        <Title>{t('SPOONITY_KEY', 'Spoonity key')}</Title>
+        <BusinessCustomSlugContainer>
+          <FormControl>
+            <Label>{t('API_KEY', 'Api key')}</Label>
+            <Input
+              type='text'
+              value={spoonityKey}
+              placeholder={t('SPOONITY_PLACEHOLDER', 'Spoonity key')}
+              onChange={(e) => setSpoonityKey(e.target.value)}
+              onKeyPress={(e) => {
+                if (!/^[0-9a-zA-Z]$/.test(e.key)) {
+                  e.preventDefault()
+                }
+              }}
+            />
+          </FormControl>
+          <Button color='primary' onClick={changeSpoonityKey}>{t('SAVE', 'Save')}</Button>
+        </BusinessCustomSlugContainer>
+      </BusinessOrderingChannelsContainer>
+      <Alert
+        title={t('SPOONITY_KEY', 'Spoonity key')}
+        content={alertState.content}
+        acceptText={t('ACCEPT', 'Accept')}
+        open={alertState.open}
+        onClose={() => closeAlert()}
+        onAccept={() => closeAlert()}
+        closeOnBackdrop={false}
+      />
+    </>
+  )
+}

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

@@ -0,0 +1,68 @@
+import styled, { css } from 'styled-components'
+
+export const BusinessOrderingChannelsContainer = styled.div`
+  box-sizing: border-box;
+  @media (min-width: 576px) {
+    padding: 20px;
+  }
+`
+export const Title = styled.h1`
+  font-size: 20px;
+  font-weight: 700;
+  color: ${props => props.theme.colors?.headingColor};
+  margin-bottom: 25px;
+`
+
+export const BusinessCustomSlugContainer = styled.div`
+  button {
+    border-radius: 7.6px;
+    height: 44px;
+  }
+`
+
+export const FormControl = styled.div`
+  margin-bottom: 20px;
+
+  input[type=text] {
+    border: 1px solid #DEE2E6;
+    box-sizing: border-box;
+    border-radius: 7.6px;
+    height: 44px;
+    width: 100%;
+  }
+`
+
+export const Label = styled.p`
+  margin-top: 0;
+  margin-bottom: 10px;
+  font-size: 14px;
+  color: ${props => props.theme?.colors.headingColor};
+`
+
+export const Tabs = styled.div`
+  display: flex;
+  width: 100%;
+  margin-bottom: 25px;
+  border-bottom: 1px solid ${props => props.theme.colors.borderColor};
+`
+
+export const Tab = styled.div`
+  user-select: none;
+  padding: 10px 0px;
+  cursor: pointer;
+  color: ${props => props.theme.colors?.headingColor};
+  font-size: 14px;
+  white-space: nowrap;
+  color: ${props => props.theme.colors.lightGray};
+  ${props => props.theme?.rtl ? css`
+    margin-left: 30px;
+  ` : css`
+    margin-right: 30px;
+  `}
+
+  ${({ active }) => active && css`
+    border-bottom: 1px solid;
+    font-weight: 500;
+    color: ${props => props.theme.colors.headingColor};
+  `}
+`

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

@@ -1,4 +1,4 @@
-import React, { useState, useRef } from 'react'
+import React, { useState, useRef, useEffect } from 'react'
 import { useLanguage, ExamineClick, DragAndDrop, UploadMenu } from 'ordering-components-admin-external'
 import { CloudUploadFill, FileEarmarkPdfFill } from 'react-bootstrap-icons'
 import { Button, Input } from '../../../styles'
@@ -76,6 +76,15 @@ const UploadMenuGuideUI = (props) => {
     }
   }
 
+  useEffect(() => {
+    if (formState?.error) {
+      setAlertState({
+        open: true,
+        content: formState.error
+      })
+    }
+  }, [formState?.error])
+
   return (
     <>
       <Container>