ordering-ui-external 10.0.1 → 10.2.0

package/src/themes/callcenterOriginal/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/themes/callcenterOriginal/src/components/Shared/HtmlEditor/InsertLink/index.js

@@ -0,0 +1,73 @@
+import React, { useState } from 'react'
+import { useLanguage } from 'ordering-components-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/themes/callcenterOriginal/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/themes/callcenterOriginal/src/components/Shared/HtmlEditor/InsertVideo/index.js

@@ -0,0 +1,51 @@
+import React, { useState } from 'react'
+import { useLanguage } from 'ordering-components-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/themes/callcenterOriginal/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/themes/callcenterOriginal/src/components/Shared/HtmlEditor/index.js

@@ -0,0 +1,172 @@
+import React, { useState, useEffect } from 'react'
+import { HtmlEditor as HtmlEditorController } from 'ordering-components-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/themes/callcenterOriginal/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/themes/callcenterOriginal/src/components/Shared/ImageCrop/index.js

@@ -1,7 +1,7 @@
 import React, { useEffect, useState, useRef } from 'react'
 import Cropper from 'cropperjs'
-import { useLanguage } from 'ordering-components-external'
-import { Button, IconButton } from '../../../styles'
+import { useApi, useLanguage, useSession, useUtils } from 'ordering-components-external'
+import { Button, Checkbox, IconButton } from '../../../styles'
 import { ArrowClockwise } from 'react-bootstrap-icons'
 import { useTheme } from 'styled-components'
 import 'cropperjs/dist/cropper.css'
@@ -11,21 +11,30 @@ import {
   ImageCropActionWrapper,
   RangeWrapper,
   ActionContentWrapper,
-  ButtonWrapper
+  ButtonWrapper,
+  ActionAspectRatioBox
 } from './styles'
+import Skeleton from 'react-loading-skeleton'
 
 export const ImageCrop = (props) => {
   const {
     photo,
     handleChangePhoto,
-    onClose
+    onClose,
+    aspectRatio,
+    showAspectRatioBox,
+    useCloudinaryUrl,
+    themeId
   } = props
 
   const [, t] = useLanguage()
   const theme = useTheme()
-
+  const [ordering] = useApi()
+  const [{ token }] = useSession()
+  const [{ optimizeImage }] = useUtils()
   const [cropper, setCropper] = useState()
   const [zoomValue, setZoomValue] = useState(50)
+  const [loading, setLoading] = useState(false)
   const cropperRef = useRef(null)
 
   const handleChangeZoom = (evt) => {
@@ -34,9 +43,31 @@ export const ImageCrop = (props) => {
     setZoomValue(value)
   }
 
-  const getCropData = () => {
+  const getCropData = async () => {
     if (typeof cropper !== 'undefined') {
-      handleChangePhoto(cropper.getCroppedCanvas({ imageSmoothingQuality: 'high' }).toDataURL())
+      let photo
+      if (useCloudinaryUrl && themeId) {
+        console.log('entra')
+        setLoading(true)
+        const response = await fetch(`${ordering.root}/themes/${themeId}/gallery`, {
+          headers: { 'Content-Type': 'application/json', Authorization: `Bearer ${token}` },
+          method: 'POST',
+          body: JSON.stringify({
+            type: 'image',
+            file: cropper.getCroppedCanvas({ imageSmoothingQuality: 'high' }).toDataURL()
+          })
+        })
+        const { result, error } = await response.json()
+        setLoading(false)
+        if (!error) {
+          photo = optimizeImage(result.image, 'f_auto,q_auto,w_2000,c_limit')
+        } else {
+          return
+        }
+      } else {
+        photo = cropper.getCroppedCanvas({ imageSmoothingQuality: 'high' }).toDataURL()
+      }
+      handleChangePhoto(photo)
       onClose && onClose()
     }
   }
@@ -48,21 +79,39 @@ export const ImageCrop = (props) => {
 
   useEffect(() => {
     if (!cropperRef.current || !photo) return
-
-    const _cropper = new Cropper(cropperRef.current, {
-      // aspectRatio: 16 / 9,
-      dragMode: 'move',
-      zoomable: false,
-      toggleDragModeOnDblclick: false
-    })
+    let _cropper
+    if (aspectRatio) {
+      _cropper = new Cropper(cropperRef.current, {
+        aspectRatio: aspectRatio,
+        dragMode: 'move',
+        zoomable: false,
+        toggleDragModeOnDblclick: false,
+        autoCropArea: 1
+      })
+    } else {
+      _cropper = new Cropper(cropperRef.current, {
+        dragMode: 'move',
+        zoomable: false,
+        toggleDragModeOnDblclick: false,
+        autoCropArea: 1
+      })
+    }
     setCropper(_cropper)
-  }, [photo])
+  }, [photo, aspectRatio])
+
+  const handleChangeAspectRatio = (checked) => {
+    checked ? cropper.setAspectRatio(18 / 9) : cropper.setAspectRatio(aspectRatio)
+  }
 
   return (
     <Container>
-      <ImageCropWrapper>
-        <img ref={cropperRef} src={photo} />
-      </ImageCropWrapper>
+      {loading
+        ? <Skeleton style={{ height: 400 }} />
+        : (
+          <ImageCropWrapper>
+            <img ref={cropperRef} src={photo} />
+          </ImageCropWrapper>
+        )}
       <ImageCropActionWrapper>
         <RangeWrapper>
           <span className='title'>{t('RESIZE_IMAGE', 'Resize image')}</span>
@@ -82,12 +131,22 @@ export const ImageCrop = (props) => {
             <ArrowClockwise />
           </IconButton>
         </ActionContentWrapper>
+        {showAspectRatioBox && (
+          <ActionAspectRatioBox>
+            <Checkbox
+              id='aspect'
+              onChange={(e) => handleChangeAspectRatio(e.target.checked)}
+            />
+            <label htmlFor='aspect'>{t('USE_WEB_ASPECT_RATIO', 'Use web aspect ratio')}</label>
+          </ActionAspectRatioBox>
+        )}
       </ImageCropActionWrapper>
       <ButtonWrapper>
         <Button
           borderRadius='7.6px'
           color='primary'
           onClick={getCropData}
+          disabled={loading}
         >
           {t('CROP', 'Crop')}
         </Button>

package/src/themes/callcenterOriginal/src/components/Shared/ImageCrop/styles.js

@@ -123,3 +123,21 @@ export const ButtonWrapper = styled.div`
     height: 44px;
   }
 `
+
+export const ActionAspectRatioBox = styled.div`
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+  user-select: none;
+
+  label {
+    font-size: 14px;
+    color: ${props => props.theme?.colors.headingColor};
+    margin-bottom: 0;
+    margin-left: 15px;
+    ${props => props.theme?.rtl && css`
+      margin-right: 15px;
+      margin-left: 0;
+    `}
+  }
+`