ordering-ui-admin-external 1.24.2 → 1.25.0

package/src/components/Shared/HtmlEditor/InsertImage/styles.js

@@ -0,0 +1,136 @@
+import styled from 'styled-components'
+
+export const InsertImageContainer = styled.div`
+  h1 {
+    font-size: 20px;
+    font-weight: 700;
+    margin-bottom: 25px;
+  }
+  > button {
+    height: 42px;
+  }
+`
+
+export const ImageListContainer = styled.div`
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  margin-top: 20px;
+`
+
+export const WrapperImage = styled.div`
+  margin: 5px;
+  cursor: pointer;
+  transition: all 250ms;
+  position: relative;
+
+  &:hover {
+    transform: scale(1.1);
+  }
+  img {
+    height: 120px;
+    background-color: #CCC;
+  }
+`
+
+export const CloseButton = styled.div`
+  position: absolute;
+  cursor: pointer;
+  top: 5px;
+  margin: 0 5px;
+  border-radius: 50%;
+  background-color: #E63757;
+  width: 24px;
+  height: 24px;
+  padding: 0 5px;
+  svg {
+    color: #FFF;
+    font-size: 14px;
+  }
+`
+
+export const WrapperInput = styled.div`
+  display: flex;
+  flex-direction: column;
+  margin-bottom: 20px;
+
+  label {
+    font-size: 14px;
+  }
+`
+
+export const NewImage = styled.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  align-items: center;
+  width: 100%;
+  margin: 20px auto;
+
+  @media (min-width: 768px){
+    width: auto;
+  }
+`
+
+export const Image = styled.div`
+  width: 100%;
+  height: 130px;
+  border-radius: 8px;
+  overflow: hidden;
+  background: ${({ isImage, theme }) => isImage ? '#FFF' : `${theme.colors.backgroundPage}`};
+  cursor: -webkit-grab;
+  cursor: grab;
+  filter: drop-shadow(0px 1px 4px rgba(0, 0, 0, 0.1));
+
+  img,
+  div {
+    width: 100%;
+    border-radius: 8px;
+    height: 100%;
+    overflow: hidden;
+  };
+
+  img{
+    object-fit: cover;
+  }
+`
+
+export const Camera = styled.div`
+  > * {
+    margin-top: 10px;
+    width: 30px;
+    height: 30px;
+  }
+`
+
+export const UploadImageIconContainer = styled.div`
+  position: absolute;
+  top: 0px;
+  background: rgba(0,0,0,0.2);
+  padding: 4px;
+`
+
+export const UploadImageIcon = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+  color: #FFF;
+  border: 1px dashed #fff;
+  span {
+    margin: 0;
+  }
+
+  svg {   
+    width: 45px;
+    height: 45px;
+  }
+`
+
+export const SkeletonWrapper = styled.div`
+  span{
+    height: 100%;
+    position: relative;
+    top: -2.5px;
+  }
+`

package/src/components/Shared/HtmlEditor/InsertLink/index.js

@@ -0,0 +1,73 @@
+import React, { useState } from 'react'
+import { useLanguage } from 'ordering-components-admin-external'
+import { Button, Checkbox, Input } from '../../../../styles'
+
+import {
+  InsertLinkContainer,
+  WrapperInput,
+  CheckboxWrapper
+} from './styles'
+
+export const InsertLink = (props) => {
+  const {
+    editorContext,
+    onClose,
+    handleRestoreEditor,
+    isLinkButton
+  } = props
+  const [, t] = useLanguage()
+  const [changesState, setChangesState] = useState({})
+
+  const handleChangeInput = (e) => {
+    setChangesState({
+      ...changesState,
+      [e.target.name]: e.target.value
+    })
+  }
+
+  const handleInsertClick = () => {
+    handleRestoreEditor()
+    editorContext.invoke('editor.createLink', {
+      text: isLinkButton
+        ? `<button style='font-size: 9px;color: white;padding: 6px 11px; cursor: pointer; border-radius: 4px; background: #2C7BE5; border: none;'>${changesState?.text || 'button'}</button>`
+        : (changesState?.text || ''),
+      url: changesState?.url || '',
+      isNewWindow: changesState?.isNewWindow ?? true
+    })
+    onClose()
+  }
+
+  return (
+    <InsertLinkContainer>
+      <h1>{t('INSERT_LINK', 'Insert link')}</h1>
+      <WrapperInput>
+        <label>{t('LINK_TEXT', 'Text to display')}</label>
+        <Input
+          name='text'
+          onChange={e => handleChangeInput(e)}
+        />
+      </WrapperInput>
+      <WrapperInput>
+        <label>{t('LINK_URL', 'Url')}</label>
+        <Input
+          name='url'
+          onChange={e => handleChangeInput(e)}
+        />
+      </WrapperInput>
+      <CheckboxWrapper>
+        <Checkbox
+          defaultChecked
+          onClick={e => setChangesState({ ...changesState, isNewWindow: e.target.checked })}
+        />
+        <span>{t('IS_NEW_WINDOW', 'Open in a new window')}</span>
+      </CheckboxWrapper>
+      <Button
+        borderRadius='8px'
+        color='primary'
+        onClick={() => handleInsertClick()}
+      >
+        {t('INSERT', 'Insert')}
+      </Button>
+    </InsertLinkContainer>
+  )
+}

package/src/components/Shared/HtmlEditor/InsertLink/styles.js

@@ -0,0 +1,34 @@
+import styled from 'styled-components'
+
+export const InsertLinkContainer = styled.div`
+  h1 {
+    font-size: 20px;
+    font-weight: 700;
+    margin-bottom: 25px;
+  }
+
+  > button {
+    height: 42px;
+  }
+`
+
+export const WrapperInput = styled.div`
+  display: flex;
+  flex-direction: column;
+  margin-bottom: 10px;
+
+  label {
+    font-size: 14px;
+  }
+`
+
+export const CheckboxWrapper = styled.div`
+  display: flex;
+  align-items: center;
+  margin-bottom: 25px;
+
+  > span {
+    margin: 0 10px;
+    font-size: 14px;
+  }  
+`

package/src/components/Shared/HtmlEditor/InsertVideo/index.js

@@ -0,0 +1,51 @@
+import React, { useState } from 'react'
+import { useLanguage } from 'ordering-components-admin-external'
+import { Button, Input } from '../../../../styles'
+import { formatUrlVideo } from '../../../../utils'
+
+import {
+  InsertLinkContainer,
+  WrapperInput
+} from './styles'
+
+export const InsertVideo = (props) => {
+  const {
+    editorContext,
+    onClose,
+    handleRestoreEditor
+  } = props
+  const [, t] = useLanguage()
+  const [videoUrl, setVideoUrl] = useState(null)
+
+  const getVideoEmbedded = (video) => {
+    if (video.indexOf('youtube')) {
+      return '<iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/' + formatUrlVideo(video) + '" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>'
+    }
+  }
+
+  const handleInsertClick = () => {
+    const HTMLstring = getVideoEmbedded(videoUrl)
+    handleRestoreEditor()
+    editorContext.invoke('editor.pasteHTML', HTMLstring)
+    onClose()
+  }
+  return (
+    <InsertLinkContainer>
+      <h1>{t('INSERT_VIDEO', 'Insert video')}</h1>
+      <WrapperInput>
+        <label>{t('VIDEO_URL', 'Video url')}</label>
+        <Input
+          name='text'
+          onChange={e => setVideoUrl(e.target.value)}
+        />
+      </WrapperInput>
+      <Button
+        borderRadius='8px'
+        color='primary'
+        onClick={() => handleInsertClick()}
+      >
+        {t('INSERT', 'Insert')}
+      </Button>
+    </InsertLinkContainer>
+  )
+}

package/src/components/Shared/HtmlEditor/InsertVideo/styles.js

@@ -0,0 +1,23 @@
+import styled from 'styled-components'
+
+export const InsertLinkContainer = styled.div`
+  h1 {
+    font-size: 20px;
+    font-weight: 700;
+    margin-bottom: 25px;
+  }
+
+  > button {
+    height: 42px;
+  }
+`
+
+export const WrapperInput = styled.div`
+  display: flex;
+  flex-direction: column;
+  margin-bottom: 25px;
+
+  label {
+    font-size: 14px;
+  }
+`

package/src/components/Shared/HtmlEditor/index.js

@@ -0,0 +1,172 @@
+import React, { useState, useEffect } from 'react'
+import { HtmlEditor as HtmlEditorController } from 'ordering-components-admin-external'
+import $ from 'jquery'
+import ReactSummernote from 'react-summernote'
+import 'react-summernote/dist/react-summernote.css'
+import 'bootstrap/js/dist/modal'
+import 'bootstrap/js/dist/dropdown'
+import 'bootstrap/js/dist/tooltip'
+import 'bootstrap/dist/css/bootstrap.css'
+import { WrapperEditor } from './styles'
+import { InsertLink } from './InsertLink'
+import { InsertVideo } from './InsertVideo'
+import { InsertImage } from './InsertImage'
+import { Modal } from '../Modal'
+
+const HtmlEditorUI = (props) => {
+  const {
+    body,
+    handleChangeBody,
+    imageListState,
+    insertImageState,
+    handleInsertImage,
+    handleDeleteImage,
+    selectedImageUrl,
+    setSelectedImageUrl
+  } = props
+
+  const [openModal, setOpenModal] = useState(null)
+  const [editorContext, setEditorContext] = useState(null)
+  const [pageContent, setPageContent] = useState(null)
+
+  const insertLink = (context) => {
+    const ui = $.summernote.ui
+    const button = ui.button({
+      contents: '<i class="note-icon-link"/>',
+      tooltip: 'link',
+      class: 'note-btn',
+      click: () => {
+        setEditorContext(context)
+        context.invoke('editor.saveRange')
+        setOpenModal('link')
+      }
+    })
+    return button.render()
+  }
+
+  const handleRestoreEditor = () => editorContext.invoke('restoreRange')
+
+  const insertImage = (context) => {
+    const ui = $.summernote.ui
+    const button = ui.button({
+      contents: '<i class="note-icon-picture"/>',
+      tooltip: 'picture',
+      class: 'note-btn',
+      click: () => {
+        setEditorContext(context)
+        context.invoke('editor.saveRange')
+        setOpenModal('image')
+      }
+    })
+    return button.render()
+  }
+
+  const insertVideo = (context) => {
+    const ui = $.summernote.ui
+    const button = ui.button({
+      contents: '<i class="note-icon-video"/>',
+      tooltip: 'video',
+      class: 'note-btn',
+      click: () => {
+        setEditorContext(context)
+        context.invoke('editor.saveRange')
+        setOpenModal('video')
+      }
+    })
+    return button.render()
+  }
+
+  const handleCloseModal = () => {
+    setOpenModal(false)
+    setEditorContext(null)
+  }
+
+  useEffect(() => {
+    if (!pageContent) return
+    handleChangeBody(pageContent)
+  }, [pageContent])
+
+  const onInit = (note) => {
+    if (body) {
+      note.reset()
+      note.replace(body)
+    }
+  }
+
+  return (
+    <>
+      <WrapperEditor>
+        <ReactSummernote
+          onInit={onInit}
+          options={{
+            height: 350,
+            fontNames: ['Arial', 'Arial Black', 'Comic Sans MS', 'Courier New'],
+            toolbar: [
+              ['style', ['style']],
+              ['font', ['bold', 'italic', 'underline', 'clear']],
+              ['fontsize', ['fontsize']],
+              ['color', ['color']],
+              ['para', ['ul', 'paragraph']],
+              ['table', ['table']],
+              ['insert', ['insertLink', 'insertImage', 'insertVideo']],
+              ['codeview', ['codeview']]
+            ],
+            buttons: {
+              insertLink: insertLink,
+              insertImage: insertImage,
+              insertVideo: insertVideo
+            }
+          }}
+          onChange={content => setPageContent(content)}
+        />
+      </WrapperEditor>
+      <Modal
+        width='60%'
+        open={openModal === 'link'}
+        onClose={() => setOpenModal(null)}
+      >
+        <InsertLink
+          editorContext={editorContext}
+          handleRestoreEditor={handleRestoreEditor}
+          onClose={() => handleCloseModal()}
+        />
+      </Modal>
+      <Modal
+        width='60%'
+        open={openModal === 'video'}
+        onClose={() => setOpenModal(null)}
+      >
+        <InsertVideo
+          editorContext={editorContext}
+          handleRestoreEditor={handleRestoreEditor}
+          onClose={() => handleCloseModal()}
+        />
+      </Modal>
+      <Modal
+        width='60%'
+        open={openModal === 'image'}
+        onClose={() => setOpenModal(null)}
+      >
+        <InsertImage
+          imageListState={imageListState}
+          editorContext={editorContext}
+          handleRestoreEditor={handleRestoreEditor}
+          onClose={() => handleCloseModal()}
+          insertImageState={insertImageState}
+          handleInsertImage={handleInsertImage}
+          handleDeleteImage={handleDeleteImage}
+          selectedImageUrl={selectedImageUrl}
+          setSelectedImageUrl={setSelectedImageUrl}
+        />
+      </Modal>
+    </>
+  )
+}
+
+export const HtmlEditor = (props) => {
+  const htmlEditorProps = {
+    ...props,
+    UIComponent: HtmlEditorUI
+  }
+  return <HtmlEditorController {...htmlEditorProps} />
+}

package/src/components/Shared/HtmlEditor/styles.js

@@ -0,0 +1,30 @@
+import styled from 'styled-components'
+
+export const WrapperEditor = styled.div`
+  .note-editor {
+    border-radius: 8px;
+    border: 1px solid ${props => props.theme.colors.borderColor};
+
+    .note-toolbar {
+      border-bottom: 1px solid ${props => props.theme.colors.borderColor};
+    }
+
+    .note-btn {
+      &:hover,
+      &:focus {
+        background-color: ${props => props.theme.colors.secundaryDarkContrast};
+        box-shadow: none;
+      }
+    }
+
+    .note-dropdown-menu {
+      a {
+        color: #000;
+      }
+
+      h1 {
+        font-size: 36px;
+      }
+    }
+  }
+`

package/src/components/Shared/index.js

@@ -29,6 +29,7 @@ import { SpinnerLoader } from './SpinnerLoader'
 import SpreadSheetEditor from './SpreadSheetEditor'
 import { ProgressRing } from './ProgressRing'
 import { ColorPicker } from './ColorPicker'
+import { HtmlEditor } from './HtmlEditor'
 
 export {
   AutoScroll,
@@ -62,5 +63,6 @@ export {
   SpinnerLoader,
   SpreadSheetEditor,
   ProgressRing,
-  ColorPicker
+  ColorPicker,
+  HtmlEditor
 }

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

@@ -8,7 +8,7 @@ import {
 import Skeleton from 'react-loading-skeleton'
 import { useInfoShare } from '../../../contexts/InfoShareContext'
 import { ThreeDots, List as MenuIcon, ArrowsAngleContract, ArrowsAngleExpand } from 'react-bootstrap-icons'
-import { Button, IconButton, Switch, DefaultSelect } from '../../../styles'
+import { Button, IconButton, Switch, DefaultSelect, LinkButton } from '../../../styles'
 import { useTheme } from 'styled-components'
 import { Alert, SearchBar, SideBar } from '../../Shared'
 import { BusinessBrandGENDetail } from '../BusinessBrandGENDetail'
@@ -258,7 +258,7 @@ const BusinessBrandListingUI = (props) => {
           </BrandListTable>
         </BrandListTableWrapper>
         <BrandListBottomContainer>
-          <span onClick={() => handleOpenSideBar()}>{t('ADD_NEW_BRAND', 'Add new brand')}</span>
+          <LinkButton onClick={() => handleOpenSideBar()}>{t('ADD_NEW_BRAND', 'Add new brand')}</LinkButton>
         </BrandListBottomContainer>
         {openDetail && (
           <SideBar

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

@@ -240,13 +240,6 @@ export const BrandListBottomContainer = styled.div`
   display: flex;
   align-items: center;
   margin-top: 16px;
-
-  span {
-    cursor: pointer;
-    user-select: none;
-    font-size: 14px;
-    color: ${props => props.theme.colors?.primary};
-  }
 `
 
 export const BrandDetailContainer = styled.div`

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

@@ -8,10 +8,6 @@ export const Container = styled.div`
     font-weight: 700;
     margin-top: 5px;
   }
-
-  @media (min-width: 1000px) {
-    max-width: 500px;
-  }
 `
 export const TabsContainer = styled.div`
   border-bottom: 1px solid ${props => props.theme.colors.borderColor};

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

@@ -4,12 +4,12 @@ import { useLanguage } from 'ordering-components-admin-external'
 import { BusinessDeliveryZoneDetails } from '../BusinessDeliveryZoneDetails'
 import { SideBar } from '../../Shared'
 import { ChevronRight } from 'react-bootstrap-icons'
-import { Checkbox } from '../../../styles'
+import { Checkbox, LinkButton } from '../../../styles'
 
 import {
   ZoneContainer,
   DeliveryZonesTable,
-  AddDeliveryZoneButton,
+  AddDeliveryZoneButtonWrapper,
   ZoneTbody,
   CheckboxWrapper
 } from './styles'
@@ -112,11 +112,13 @@ export const BusinessDeliveryZoneList = (props) => {
           ))}
         </DeliveryZonesTable>
 
-        <AddDeliveryZoneButton
-          onClick={(e) => handleOpenZone(e, null)}
-        >
-          {t('ADD_DELIVERY_ZONE', 'Add delivery zone')}
-        </AddDeliveryZoneButton>
+        <AddDeliveryZoneButtonWrapper>
+          <LinkButton
+            onClick={(e) => handleOpenZone(e, null)}
+          >
+            {t('ADD_DELIVERY_ZONE', 'Add delivery zone')}
+          </LinkButton>
+        </AddDeliveryZoneButtonWrapper>
       </ZoneContainer>
       {isOpenDetails && (
         <SideBar

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

@@ -2,9 +2,6 @@ import styled, { css } from 'styled-components'
 
 export const ZoneContainer = styled.div`
   margin: 30px 0 20px 0;
-  @media (min-width: 1000px) {
-    max-width: 500px;
-  }
 `
 
 export const DeliveryZonesTable = styled.table`
@@ -50,15 +47,8 @@ export const ActionsWrapper = styled.div`
   align-items: center;
 `
 
-export const AddDeliveryZoneButton = styled.div`
-  color: ${props => props.theme.colors.lightGray};
-  font-size: 14px;
+export const AddDeliveryZoneButtonWrapper = styled.div`
   padding: 10px 0;
-  cursor: pointer;
-  width: fit-content;
-  &:hover {
-    color: ${props => props.theme.colors.primary};
-  }
 `
 export const CheckboxWrapper = styled.div`
   display: flex;

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

@@ -3,12 +3,9 @@ import styled from 'styled-components'
 export const Container = styled.div`
   display: flex;
   height: 100%;
-
-  @media (min-width: 1000px) {
-    max-width: 500px;
-  }
 `
 export const InfoConatiner = styled.div`
+  width: 100%;
   height: 100%;
   overflow-x: hidden;
   h1 {