ordering-ui-admin-external 1.5.0 → 1.6.0

package/src/components/Marketing/CampaignEmail/index.js

@@ -1,7 +1,16 @@
-import React, { useState } from 'react'
-import { useLanguage } from 'ordering-components-admin-external'
-import { Input, TextArea, Button } from '../../../styles'
-import { Alert } from '../../Shared'
+import React, { useState, useEffect } from 'react'
+import { useLanguage, useEvent, CampaignEmail as CampaignEmailController } from 'ordering-components-admin-external'
+import { Input, Button } from '../../../styles'
+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 { Alert, Modal } from '../../Shared'
+import { InsertImage } from '../../Settings/InsertImage'
+import { InsertLink } from '../../Settings/InsertLink'
 import {
   Container,
   InputWrapper,
@@ -9,21 +18,40 @@ import {
   EmailPreviewHeader,
   PointGroup,
   EmailPreviewContent,
-  ButtonWrapper
+  ButtonWrapper,
+  WrapperEditor,
+  Preview,
+  Description
 } from './styles'
 
-export const CampaignEmail = (props) => {
+const CampaignEmailUI = (props) => {
   const {
     isAddMode,
     contactState,
     handleChangeData,
     handleUpdateContact,
     handleAddCampaign,
-    formState
+    formState,
+    handleChangeContact,
+    imageListState,
+    insertImageState,
+    handleInsertImage,
+    handleDeleteImage,
+    selectedImageUrl,
+    setSelectedImageUrl
   } = props
 
   const [, t] = useLanguage()
+  const [events] = useEvent()
   const [alertState, setAlertState] = useState({ open: false, content: [] })
+  const [openModal, setOpenModal] = useState(null)
+  const [editorContext, setEditorContext] = useState(null)
+  const [emailBody, setEmailBody] = useState(null)
+
+  const handleCloseModal = () => {
+    setOpenModal(false)
+    setEditorContext(null)
+  }
 
   const closeAlert = () => {
     setAlertState({
@@ -73,26 +101,95 @@ export const CampaignEmail = (props) => {
     }
   }
 
+  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 insertLink = (context) => {
+    const ui = $.summernote.ui
+    const button = ui.button({
+      contents: '<button style="background: #2C7BE5; border: none; font-size: 12px; color: white;">BUTTON</button>',
+      tooltip: 'link-button',
+      class: 'note-btn',
+      click: () => {
+        setEditorContext(context)
+        context.invoke('editor.saveRange')
+        setOpenModal('link')
+      }
+    })
+    return button.render()
+  }
+
+  const handleGoToPage = () => {
+    events.emit('go_to_page', { page: 'operation_settings', search: '?category=10' })
+  }
+
+  useEffect(() => {
+    if (!emailBody) return
+    handleChangeContact('body', emailBody)
+  }, [emailBody])
+
   return (
     <>
       <Container>
+        <Description>
+          {t('SMTP_SETTINGS_LINK_DESC', 'You need to complete SMTP configuration first, you can do it here:')} <span onClick={() => handleGoToPage()}>{t('EMAIL_SETTINGS', 'Email settings')}</span>
+        </Description>
         <InputWrapper>
           <label>{t('TITLE', 'Title')}</label>
           <Input
             name='title'
             placeholder={t('TITLE', 'Title')}
-            defaultValue={contactState?.changes?.contact_data?.title || ''}
+            value={contactState?.changes?.contact_data?.title || ''}
             onChange={handleChangeData}
           />
         </InputWrapper>
         <InputWrapper>
           <label>{t('MESSAGES', 'Messages')}</label>
-          <TextArea
-            name='body'
-            placeholder={t('WRITE_MESSAGE', 'Write a message')}
-            defaultValue={contactState?.changes?.contact_data?.body || ''}
-            onChange={handleChangeData}
-          />
+          <WrapperEditor>
+            <ReactSummernote
+              value={contactState?.changes?.contact_data?.body ?? '<p><br></p>'}
+              placeholder={t('EMAIL_CONTENT', 'Email content')}
+              onInit={({ summernote }) => summernote('code', (contactState?.changes?.contact_data?.body ?? '<p><br></p>'))}
+              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']],
+                  ['codeview', ['codeview']]
+                ],
+                buttons: {
+                  insertLink: insertLink,
+                  insertImage: insertImage
+                },
+                popover: {
+                  link: [
+                    ['link', ['linkDialogShow']]
+                  ]
+                }
+              }}
+              onChange={content => setEmailBody(content)}
+            />
+          </WrapperEditor>
         </InputWrapper>
         <EmailPreviewWrapper>
           <EmailPreviewHeader>
@@ -104,7 +201,10 @@ export const CampaignEmail = (props) => {
           </EmailPreviewHeader>
           <EmailPreviewContent>
             <h2>{contactState?.changes?.contact_data?.title || ''}</h2>
-            <p>{contactState?.changes?.contact_data?.body || ''}</p>
+            <Preview
+              dangerouslySetInnerHTML={{ __html: contactState?.changes?.contact_data?.body || '' }}
+            />
+            {/* <p>{contactState?.changes?.contact_data?.body || ''}</p> */}
           </EmailPreviewContent>
         </EmailPreviewWrapper>
       </Container>
@@ -117,6 +217,35 @@ export const CampaignEmail = (props) => {
           {isAddMode ? t('ADD', 'Add') : t('SAVE', 'Save')}
         </Button>
       </ButtonWrapper>
+      <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>
+      <Modal
+        width='60%'
+        open={openModal === 'link'}
+        onClose={() => setOpenModal(null)}
+      >
+        <InsertLink
+          editorContext={editorContext}
+          handleRestoreEditor={handleRestoreEditor}
+          onClose={() => handleCloseModal()}
+          isLinkButton
+        />
+      </Modal>
       <Alert
         title={t('CAMPAIGN', 'Campaign')}
         content={alertState.content}
@@ -129,3 +258,11 @@ export const CampaignEmail = (props) => {
     </>
   )
 }
+
+export const CampaignEmail = (props) => {
+  const campaignEmailProps = {
+    ...props,
+    UIComponent: CampaignEmailUI
+  }
+  return <CampaignEmailController {...campaignEmailProps} />
+}

package/src/components/Marketing/CampaignEmail/styles.js

@@ -3,15 +3,15 @@ import styled, { css } from 'styled-components'
 export const Container = styled.div``
 
 export const InputWrapper = styled.div`
-  label {
+  > label {
     margin-bottom: 10px;
     font-size: 14px;
     line-height: 24px;
   }
-  input, textarea {
+  > input, textarea {
     width: 100%;
   }
-  textarea {
+  > textarea {
     height: 80px;
   }
   margin-bottom: 35px;
@@ -84,3 +84,64 @@ export const ButtonWrapper = styled.div`
     border-radius: 8px;
   }
 `
+
+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;
+      }
+    }
+  }
+  .modal-header .close {
+    padding: 0px !important;
+    margin: 0px !important;
+  }
+  .modal-header {
+    align-items: center !important;
+  }
+  .checkbox input {
+    margin-right: 10px;
+    margin-top: 3px;
+  }
+  .modal-body {
+    > div:first-child {
+      display: none;
+    }
+  }
+`
+export const Preview = styled.div`
+  overflow: hidden;
+`
+
+export const Description = styled.div`
+  font-size: 14px;
+  margin: 10px 0px;
+  span {
+    color: ${props => props.theme.colors.primary};
+    cursor: pointer;
+    transition: all 0.3s linear;
+    &:hover {
+      text-decoration: underline;
+    }
+  }
+`

package/src/components/Marketing/CampaignHeader/index.js

@@ -1,7 +1,7 @@
 import React from 'react'
-import { useLanguage } from 'ordering-components-admin-external'
+import { useLanguage, useSession } from 'ordering-components-admin-external'
 import { useInfoShare } from '../../../contexts/InfoShareContext'
-import { List as MenuIcon } from 'react-bootstrap-icons'
+import { List as MenuIcon, InfoCircle } from 'react-bootstrap-icons'
 import { SearchBar } from '../../Shared'
 import { Button, IconButton } from '../../../styles'
 
@@ -10,7 +10,9 @@ import {
   HeaderSection,
   HeaderTitle,
   TopRightSection,
-  WrapperSearch
+  WrapperSearch,
+  InfoWrapper,
+  InfoContent
 } from './styles'
 
 export const CampaignHeader = (props) => {
@@ -21,6 +23,7 @@ export const CampaignHeader = (props) => {
   } = props
 
   const [, t] = useLanguage()
+  const [sessionState] = useSession()
   const [{ isCollapse }, { handleMenuCollapse }] = useInfoShare()
 
   return (
@@ -35,6 +38,19 @@ export const CampaignHeader = (props) => {
           </IconButton>
         )}
         <HeaderTitle>{t('CAMPAIGN', 'Campaign')}</HeaderTitle>
+        {sessionState?.user?.level === 0 && (
+          <InfoWrapper>
+            <IconButton
+              color='primary'
+            >
+              <InfoCircle />
+            </IconButton>
+            <InfoContent>
+              {t('MARKETING_INFO', 'Create campaigns to reach your customer with news, offers and new products. Need help with the set-up? Contact our team here:')}
+              <a href='https://www.ordering.co/support' target='_blank' rel='noopener noreferrer'>{t('CUSTOMER_SUPPORT', 'Customer support')}</a>
+            </InfoContent>
+          </InfoWrapper>
+        )}
       </HeaderSection>
       <TopRightSection>
         <WrapperSearch>

package/src/components/Marketing/CampaignHeader/styles.js

@@ -34,6 +34,83 @@ export const HeaderTitle = styled.p`
     width: calc(100% - 50px);
   }
 `
+
+export const InfoWrapper = styled.div`
+  position: relative;
+  ${props => props.theme?.rtl ? css`
+    margin-left: -8px;
+    margin-right: 8px;
+  ` : css`
+    margin-right: -8px;
+    margin-left: 8px;
+  `}
+
+  > button {
+    height: 25px;
+    svg {
+      width: 16px;
+      height: 16px;
+    }
+  }
+  &:hover > div {
+    /* display: block; */
+    visibility: visible;
+    opacity: 1;
+  }
+`
+
+export const InfoContent = styled.div`
+  position: absolute;
+  top: 100%;
+  z-index: 999;
+  background: ${props => props.theme.colors.backgroundInfo};
+  border: 1px solid ${props => props.theme.colors.primary};
+  box-sizing: border-box;
+  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.12);
+  border-radius: 7.6px;
+  padding: 8px 12px;
+  font-size: 12px;
+  line-height: 18px;
+  min-width: 150px;
+  transition: all 0.3s linear;
+  visibility: hidden;
+  opacity: 0;
+  /* display: none; */
+  right: 0px;
+  ${props => props.theme.rtl && css`
+    left: 0px;
+    right: initial;
+  `}
+
+  a {
+    color: ${props => props.theme.colors.primary};
+    transition: all 0.3s linear;
+    cursor: pointer;
+    margin-left: 5px;
+    ${props => props.theme.rtl && css`
+      margin-left: 0px;
+      margin-right: 5px;
+    `}
+    &:hover {
+      text-decoration: underline;
+    }
+  }
+
+  @media (min-width: 576px) {
+    min-width: 350px;
+    padding: 12px 15px;
+    left: 0px;
+    ${props => props.theme.rtl && css`
+      right: 0px;
+      left: initial;
+    `}
+  }
+
+  @media (min-width: 993px) {
+    min-width: 535px;
+  }
+`
+
 export const TopRightSection = styled.div`
   width: 100%;
   display: flex;

package/src/components/Marketing/CampaignList/index.js

@@ -32,11 +32,12 @@ export const CampaignList = (props) => {
     campaign: true,
     contact_type: true,
     audience: true,
-    // sales_general: true,
-    // open_rate: true,
-    // click_rate: true,
-    update: true,
-    actions: true
+    sent_count: true,
+    open_count: true,
+    unsubscribed_count: true,
+    bounced_count: true
+    // update: true,
+    // actions: true
   })
 
   const optionsDefault = [
@@ -52,26 +53,30 @@ export const CampaignList = (props) => {
       value: 'audience',
       content: t('AUDIENCE', 'Audience')
     },
-    // {
-    //   value: 'sales_general',
-    //   content: t('SALES_GENERAL', 'Sales general')
-    // },
-    // {
-    //   value: 'open_rate',
-    //   content: t('OPEN_RATE', 'Open rate')
-    // },
-    // {
-    //   value: 'click_rate',
-    //   content: t('CLICK_RATE', 'Click rate')
-    // },
     {
-      value: 'update',
-      content: t('UPDATE', 'Update')
+      value: 'sent_count',
+      content: t('SENT', 'Sent')
+    },
+    {
+      value: 'open_count',
+      content: t('OPENS', 'Opens')
     },
     {
-      value: 'actions',
-      content: t('ACTIONS', 'Actions')
+      value: 'unsubscribed_count',
+      content: t('UNSUBSCRIBED', 'Unsubscribed')
+    },
+    {
+      value: 'bounced_count',
+      content: t('BOUNCES', 'Bounces')
     }
+    // {
+    //   value: 'update',
+    //   content: t('UPDATE', 'Update')
+    // },
+    // {
+    //   value: 'actions',
+    //   content: t('ACTIONS', 'Actions')
+    // }
   ]
 
   const checkColor = (status) => {
@@ -120,15 +125,18 @@ export const CampaignList = (props) => {
               {allowColumns?.audience && (
                 <th>{t('AUDIENCE', 'Audience')}</th>
               )}
-              {/* {allowColumns?.sales_general && (
-                <th>{t('SALES_GENERAL', 'Sales general')}</th>
+              {allowColumns?.sent_count && (
+                <th>{t('SENT', 'Sent')}</th>
+              )}
+              {allowColumns?.open_count && (
+                <th>{t('OPENS', 'Opens')}</th>
               )}
-              {allowColumns?.open_rate && (
-                <th>{t('OPEN_RATE', 'Open rate')}</th>
+              {allowColumns?.unsubscribed_count && (
+                <th>{t('UNSUBSCRIBED', 'Unsubscribed')}</th>
+              )}
+              {allowColumns?.bounced_count && (
+                <th>{t('BOUNCES', 'Bounces')}</th>
               )}
-              {allowColumns?.click_rate && (
-                <th>{t('CLICK_RATE', 'Click rate')}</th>
-              )} */}
               <th className='allow-colums action'>
                 <ColumnAllowSettingPopover
                   allowColumns={allowColumns}
@@ -158,21 +166,26 @@ export const CampaignList = (props) => {
                       <Skeleton width={100} height={20} />
                     </td>
                   )}
-                  {/* {allowColumns?.sales_general && (
+                  {allowColumns?.sent_count && (
+                    <td>
+                      <Skeleton width={100} height={20} />
+                    </td>
+                  )}
+                  {allowColumns?.open_count && (
                     <td>
-                      <Skeleton width={50} height={20} />
+                      <Skeleton width={100} height={20} />
                     </td>
                   )}
-                  {allowColumns?.open_rate && (
+                  {allowColumns?.unsubscribed_count && (
                     <td>
-                      <Skeleton width={50} height={20} />
+                      <Skeleton width={100} height={20} />
                     </td>
                   )}
-                  {allowColumns?.click_rate && (
+                  {allowColumns?.bounced_count && (
                     <td>
-                      <Skeleton width={50} height={20} />
+                      <Skeleton width={100} height={20} />
                     </td>
-                  )} */}
+                  )}
                   <td>
                     <SwitchWrapper>
                       <p className='campaign-enabled'><Skeleton width={80} height={20} /></p>
@@ -203,39 +216,36 @@ export const CampaignList = (props) => {
                   {allowColumns?.audience && (
                     <td>{campaign?.audience_type}</td>
                   )}
-                  {/* {allowColumns?.sales_general && (
-                    <td>05</td>
+                  {allowColumns?.sent_count && (
+                    <td>{campaign?.sent_count}</td>
                   )}
-                  {allowColumns?.open_rate && (
-                    <td>02</td>
+                  {allowColumns?.open_count && (
+                    <td>{campaign?.open_count}</td>
                   )}
-                  {allowColumns?.click_rate && (
-                    <td className='right-border'>
-                      <div>
-                        <p>02</p>
-                      </div>
-                    </td>
-                  )} */}
-                  {(allowColumns?.update || allowColumns?.actions) && (
-                    <td>
-                      {allowColumns?.actions && campaign?.audience_type === 'dynamic' && (
-                        <SwitchWrapper>
-                          <p className='campaign-enabled'>{t('ENABLE', 'Enable')}</p>
-                          <Switch
-                            defaultChecked={campaign?.enabled}
-                            onChange={val => handleUpdateCampaign(campaign.id, { enabled: val })}
-                            className='enable_control'
-                          />
-                        </SwitchWrapper>
-                      )}
-                      {allowColumns?.update && campaign?.audience_type === 'fixed' && (
-                        <StatusWrapper>
-                          <p>{campaign?.status}</p>
-                          <StatusPoint style={{ background: checkColor(campaign?.status) }} />
-                        </StatusWrapper>
-                      )}
-                    </td>
+                  {allowColumns?.unsubscribed_count && (
+                    <td>{campaign?.unsubscribed_count}</td>
+                  )}
+                  {allowColumns?.bounced_count && (
+                    <td>{campaign?.bounced_count}</td>
                   )}
+                  <td>
+                    {campaign?.audience_type === 'dynamic' && (
+                      <SwitchWrapper>
+                        <p className='campaign-enabled'>{t('ENABLE', 'Enable')}</p>
+                        <Switch
+                          defaultChecked={campaign?.enabled}
+                          onChange={val => handleUpdateCampaign(campaign.id, { enabled: val })}
+                          className='enable_control'
+                        />
+                      </SwitchWrapper>
+                    )}
+                    {campaign?.audience_type === 'fixed' && (
+                      <StatusWrapper>
+                        <p>{campaign?.status}</p>
+                        <StatusPoint style={{ background: checkColor(campaign?.status) }} />
+                      </StatusWrapper>
+                    )}
+                  </td>
                 </tr>
               </Tbody>
             ))

package/src/components/Marketing/CampaignNotification/index.js

@@ -1,5 +1,5 @@
 import React, { useState } from 'react'
-import { useLanguage } from 'ordering-components-admin-external'
+import { useLanguage, useEvent } from 'ordering-components-admin-external'
 import { Input, TextArea, Button } from '../../../styles'
 import { useTheme } from 'styled-components'
 import { Alert } from '../../Shared'
@@ -10,7 +10,8 @@ import {
   SmsPreviewWrapper,
   SmsContentLayout,
   SmsPreviewContentWrapper,
-  SmsPreviewContent
+  SmsPreviewContent,
+  Description
 } from './styles'
 
 export const CampaignNotification = (props) => {
@@ -24,8 +25,8 @@ export const CampaignNotification = (props) => {
   } = props
 
   const [, t] = useLanguage()
-
   const theme = useTheme()
+  const [events] = useEvent()
   const [alertState, setAlertState] = useState({ open: false, content: [] })
 
   const closeAlert = () => {
@@ -76,9 +77,16 @@ export const CampaignNotification = (props) => {
     }
   }
 
+  const handleGoToPage = () => {
+    events.emit('go_to_page', { page: 'operation_settings', search: '?category=14' })
+  }
+
   return (
     <>
       <Container>
+        <Description>
+          {t('NOTIFICATION_SETTINGS_LINK_DESC', 'You need to complete One signal configuration first, you can do it here:')} <span onClick={() => handleGoToPage()}>{t('NOTIFICATION_SETTINGS', 'Notification settings')}</span>
+        </Description>
         <InputWrapper>
           <label>{t('TITLE', 'Title')}</label>
           <Input

package/src/components/Marketing/CampaignNotification/styles.js

@@ -93,3 +93,16 @@ export const SmsPreviewContent = styled.div`
     color: ${props => props.theme.colors.lightGray};
   }
 `
+
+export const Description = styled.div`
+  font-size: 14px;
+  margin: 10px 0px;
+  span {
+    color: ${props => props.theme.colors.primary};
+    cursor: pointer;
+    transition: all 0.3s linear;
+    &:hover {
+      text-decoration: underline;
+    }
+  }
+`