ordering-ui-admin-external 1.10.0 → 1.11.1

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

@@ -0,0 +1,297 @@
+import React from 'react'
+import styled, { css } from 'styled-components'
+import { darken } from 'polished'
+
+export const Container = styled.div`
+  width: 100%;
+  padding: 20px;
+  box-sizing: border-box;
+  > button {
+    height: 44px;
+    margin-top: 25px;
+  }
+`
+export const HeaderContainer = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 25px;
+
+  ${props => props.theme?.rtl ? css`
+    margin-left: 40px;
+  ` : css`
+    margin-right: 40px;
+  `}
+
+  h1 {
+    font-size: 20px;
+    margin: 0;
+    font-weight: 700;
+    ${props => props.theme?.rtl ? css`
+      margin-left: 8px;
+    ` : css`
+      margin-right: 8px;
+    `}
+  }
+`
+export const LeftHeader = styled.div`
+  display: flex;
+  align-items: center;
+`
+
+export const RightHeader = styled.div`
+  display: flex;
+  align-items: center;
+`
+export const DropDownWrapper = styled.div`
+  ${props => props.theme?.rtl ? css`
+    margin-right: 5px;
+    ` : css`
+    margin-left: 5px;
+  `}
+  button {
+    display: flex;
+    background: transparent !important;
+    border: none;
+    padding: 5px;
+    border-radius: 8px;
+    svg {
+      color: ${props => props.theme.colors.headingColor};
+      font-size: 20px;
+    }
+    &:active,
+    &:focus {
+      border-color: unset !important;
+      box-shadow: none !important;
+    }
+    &: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 BannerImage = styled.div`
+  ${({ isWebBanner }) => isWebBanner ? css`
+    height: 95px;
+  ` : css`
+    width: 130px;
+    height: 130px;
+  `}
+  margin-bottom: 20px;
+  border-radius: 8px;
+  overflow: hidden;
+  cursor: -webkit-grab;
+  cursor: grab;
+  box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.1);
+  position: relative;
+
+  img,
+  div {
+    width: 100%;
+    border-radius: 8px;
+    height: 100%;
+    overflow: hidden;
+  };
+
+  img{
+    object-fit: cover;
+  }
+`
+export const UploadImageIconContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  position: absolute;
+  top: 0px;
+  background: rgba(0,0,0,0.1);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  ${({ small }) => small ? css`
+    padding: 4px;
+  ` : css`
+    padding: 8px;
+  `}
+  svg {
+    font-size: 55px;
+    color: ${props => props.theme.colors.lightGray};
+  }
+
+  p {
+    margin: 0px;
+    padding-top: 14px;
+    font-size: 12px;
+    color: ${props => props.theme.colors.lightGray};
+    text-align: center;
+  }
+`
+export const FormController = styled.div`
+  display: flex;
+  flex-direction: column;
+
+  label {
+    font-size: 14px;
+    margin-bottom: 8px;
+  }
+`
+export const SelectWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  .select {
+    ${props => props.theme?.rtl ? css`
+      margin-left: 2px;
+    ` : css`
+      margin-right: 2px;
+    `}
+    font-size: 14px;
+    background: ${props => props.theme.colors.secundary};
+    border: none;
+    > div:first-child {
+      padding-top: 5px;
+      padding-bottom: 5px;
+    }
+    .list {
+      > div {
+        white-space: nowrap;
+      }
+    }
+  }
+`
+export const SearchBarWrapper = styled.div`
+  margin: 20px 0;
+`
+export const BusinessListWrapper = styled.div`
+  height: calc(100% - 440px);
+  overflow-x: hidden;
+
+  #not-found-source {
+    height: 100%;
+  }
+`
+export const BusinessItemContainer = styled.div`
+  display: flex;
+  align-items: center;
+  padding: 10px 0;
+  border-bottom: 1px solid #E9ECEF;
+  margin-bottom: 5px;
+`
+export const WrapperImage = styled.div`
+  max-width: 38px;
+  max-height: 38px;
+  height: 38px;
+  width: 38px;
+  ${({ isSkeleton }) => !isSkeleton && css`
+    box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.1);
+  `}
+  border-radius: 7.6px;
+
+  ${props => props.theme?.rtl ? css`
+    margin-right: 12px;
+  ` : css`
+    margin-left: 12px;
+  `}
+`
+
+const ImageStyled = styled.div`
+  display: flex;
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+  position: relative;
+  background-repeat: no-repeat, repeat;
+  background-size: cover;
+  object-fit: cover;
+  background-position: center;
+  border-radius: 7.6px;
+`
+export const Image = (props) => {
+  return (
+    <ImageStyled
+      {...props}
+      style={{ backgroundImage: `url(${props.bgimage})` }}
+    >
+      {props.children}
+    </ImageStyled>
+  )
+}
+
+export const BusinessName = styled.span`
+  font-size: 12px;
+  ${props => props.theme?.rtl ? css`
+    margin-right: 12px;
+  ` : css`
+    margin-left: 12px;
+  `}
+`
+export const ProductLinkContainer = styled.div`
+  margin: 20px 0;
+  height: calc(100% - 410px);
+`
+export const Option = styled.div`
+  display: flex;
+  align-items: center;
+  
+  img {
+    min-height: 38px;
+    min-width: 38px;
+    height: 38px;
+    width: 38px;
+    border-radius: 8px;
+    object-fit: cover;
+    box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
+    border: 1px solid ${props => props.theme.colors.borderColor};
+    margin-right: 8px;
+    ${props => props.theme?.rtl && css`
+      margin-right: 0px;
+      margin-left: 8px;
+    `}
+  }
+  span {
+    display: flex;
+    flex-direction: column;
+    font-size: 12px;
+    max-width: 170px;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    overflow: hidden;
+    color: ${props => props.theme.colors.textGray};
+    b {
+      font-size: 14px;
+      line-height: 20px;
+      font-weight: 400;
+      color: ${props => props.theme.colors.textBlack};
+    }
+  }
+`
+export const RadioButton = styled.div`
+  cursor: pointer;
+`

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

@@ -1,5 +1,6 @@
-import React, { useState, useEffect } from 'react'
-import { useLanguage, useEvent, CampaignEmail as CampaignEmailController } from 'ordering-components-admin-external'
+import React, { useState, useEffect, useMemo } from 'react'
+import Skeleton from 'react-loading-skeleton'
+import { useLanguage, CampaignEmail as CampaignEmailController } from 'ordering-components-admin-external'
 import { Input, Button } from '../../../styles'
 import $ from 'jquery'
 import ReactSummernote from 'react-summernote'
@@ -11,6 +12,7 @@ import 'bootstrap/dist/css/bootstrap.css'
 import { Alert, Modal } from '../../Shared'
 import { InsertImage } from '../../Settings/InsertImage'
 import { InsertLink } from '../../Settings/InsertLink'
+import { SettingsList } from '../../Settings/SettingsList'
 import {
   Container,
   InputWrapper,
@@ -21,7 +23,8 @@ import {
   ButtonWrapper,
   WrapperEditor,
   Preview,
-  Description
+  Description,
+  BottomSpace
 } from './styles'
 
 const CampaignEmailUI = (props) => {
@@ -38,15 +41,29 @@ const CampaignEmailUI = (props) => {
     handleInsertImage,
     handleDeleteImage,
     selectedImageUrl,
-    setSelectedImageUrl
+    setSelectedImageUrl,
+    categoryList
   } = 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 [category, setCategory] = useState()
+
+  const generalList = [
+    'email_smtp_use_default',
+    'email_smtp_host',
+    'email_smtp_username',
+    'email_smtp_password',
+    'email_smtp_encryption',
+    'email_smtp_port'
+  ]
+
+  const isEnableConfig = useMemo(() => {
+    return category?.configs?.filter(config => generalList.includes(config.key)).every(config => !!config?.value)
+  }, [category])
 
   const handleCloseModal = () => {
     setOpenModal(false)
@@ -133,90 +150,120 @@ const CampaignEmailUI = (props) => {
     return button.render()
   }
 
-  const handleGoToPage = () => {
-    events.emit('go_to_page', { page: 'operation_settings', search: '?category=10' })
-  }
-
   useEffect(() => {
     if (!emailBody) return
     handleChangeContact('body', emailBody)
   }, [emailBody])
 
+  useEffect(() => {
+    if (categoryList?.categories?.length > 0) {
+      const selectedCategory = categoryList?.categories.find(item => item.key === 'email_configs')
+      const configs = selectedCategory?.configs.filter(config => generalList.includes(config.key))
+      setCategory({ ...selectedCategory, configs: configs })
+    }
+  }, [categoryList])
+
   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')}
-            value={contactState?.changes?.contact_data?.title || ''}
-            onChange={handleChangeData}
-          />
-        </InputWrapper>
-        <InputWrapper>
-          <label>{t('MESSAGES', 'Messages')}</label>
-          <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>
-            <PointGroup>
-              <div />
-              <div />
-              <div />
-            </PointGroup>
-          </EmailPreviewHeader>
-          <EmailPreviewContent>
-            <h2>{contactState?.changes?.contact_data?.title || ''}</h2>
-            <Preview
-              dangerouslySetInnerHTML={{ __html: contactState?.changes?.contact_data?.body || '' }}
+      {isEnableConfig ? (
+        <>
+          <Container>
+            <InputWrapper>
+              <label>{t('TITLE', 'Title')}</label>
+              <Input
+                name='title'
+                placeholder={t('TITLE', 'Title')}
+                value={contactState?.changes?.contact_data?.title || ''}
+                onChange={handleChangeData}
+              />
+            </InputWrapper>
+            <InputWrapper>
+              <label>{t('MESSAGES', 'Messages')}</label>
+              <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>
+                <PointGroup>
+                  <div />
+                  <div />
+                  <div />
+                </PointGroup>
+              </EmailPreviewHeader>
+              <EmailPreviewContent>
+                <h2>{contactState?.changes?.contact_data?.title || ''}</h2>
+                <Preview
+                  dangerouslySetInnerHTML={{ __html: contactState?.changes?.contact_data?.body || '' }}
+                />
+                {/* <p>{contactState?.changes?.contact_data?.body || ''}</p> */}
+              </EmailPreviewContent>
+            </EmailPreviewWrapper>
+          </Container>
+          <ButtonWrapper>
+            <Button
+              color='primary'
+              onClick={handleSaveEmail}
+              disabled={contactState.loading}
+            >
+              {isAddMode ? t('ADD', 'Add') : t('SAVE', 'Save')}
+            </Button>
+          </ButtonWrapper>
+        </>
+      ) : (
+        <>
+          <Description>
+            <span>
+              {t('SMTP_SETTINGS_LINK_DESC', 'You need to complete SMTP configuration first')}
+            </span>
+          </Description>
+          {categoryList?.loading && (
+            <>
+              {[...Array(5).keys()].map(i => (
+                <p key={i}>
+                  <Skeleton height={20} />
+                </p>
+              ))}
+            </>
+          )}
+          {!categoryList?.loading && category && (
+            <SettingsList
+              {...props}
+              category={category}
+              isCampaign
             />
-            {/* <p>{contactState?.changes?.contact_data?.body || ''}</p> */}
-          </EmailPreviewContent>
-        </EmailPreviewWrapper>
-      </Container>
-      <ButtonWrapper>
-        <Button
-          color='primary'
-          onClick={handleSaveEmail}
-          disabled={contactState.loading}
-        >
-          {isAddMode ? t('ADD', 'Add') : t('SAVE', 'Save')}
-        </Button>
-      </ButtonWrapper>
+          )}
+          <BottomSpace />
+        </>
+      )}
       <Modal
         width='60%'
         open={openModal === 'image'}

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

@@ -2,7 +2,7 @@ import React, { useState } from 'react'
 import Skeleton from 'react-loading-skeleton'
 import { useLanguage } from 'ordering-components-admin-external'
 import { Switch } from '../../../styles'
-import { ColumnAllowSettingPopover, Pagination } from '../../Shared'
+import { ColumnAllowSettingPopover, Pagination, Modal } from '../../Shared'
 
 import {
   Container,
@@ -12,8 +12,10 @@ import {
   AddNewPageButton,
   SwitchWrapper,
   StatusWrapper,
-  StatusPoint
+  StatusPoint,
+  LinkText
 } from './styles'
+import { CampaignUserList } from '../CampaignUsersList'
 
 export const CampaignList = (props) => {
   const {
@@ -23,15 +25,18 @@ export const CampaignList = (props) => {
     setPaginationProps,
     handleOpenDetail,
     selectedCampaign,
-    handleUpdateCampaign
+    handleUpdateCampaign,
+    setSelectedCampaign
   } = props
 
   const [, t] = useLanguage()
+  const [openModal, setOpenModal] = useState(false)
 
   const [allowColumns, setAllowColumns] = useState({
     campaign: true,
     contact_type: true,
     audience: true,
+    in_queue: true,
     sent_count: true,
     open_count: true,
     unsubscribed_count: true,
@@ -53,6 +58,10 @@ export const CampaignList = (props) => {
       value: 'audience',
       content: t('AUDIENCE', 'Audience')
     },
+    {
+      value: 'in_queue',
+      content: t('IN_QUEUE', 'In Queue')
+    },
     {
       value: 'sent_count',
       content: t('SENT', 'Sent')
@@ -105,11 +114,16 @@ export const CampaignList = (props) => {
   }
 
   const handleClickCampaign = (e, campaign) => {
-    const inValid = e.target.closest('.enable_control')
+    const inValid = e.target.closest('.enable_control') || e.target.closest('.opens')
     if (inValid) return
     handleOpenDetail(campaign)
   }
 
+  const handleOpens = (campaign) => {
+    setSelectedCampaign(campaign)
+    setOpenModal(true)
+  }
+
   return (
     <>
       <Container>
@@ -125,6 +139,9 @@ export const CampaignList = (props) => {
               {allowColumns?.audience && (
                 <th>{t('AUDIENCE', 'Audience')}</th>
               )}
+              {allowColumns?.in_queue && (
+                <th>{t('IN_QUEUE', 'In Queue')}</th>
+              )}
               {allowColumns?.sent_count && (
                 <th>{t('SENT', 'Sent')}</th>
               )}
@@ -166,6 +183,11 @@ export const CampaignList = (props) => {
                       <Skeleton width={100} height={20} />
                     </td>
                   )}
+                  {allowColumns?.in_queue && (
+                    <td>
+                      <Skeleton width={100} height={20} />
+                    </td>
+                  )}
                   {allowColumns?.sent_count && (
                     <td>
                       <Skeleton width={100} height={20} />
@@ -216,17 +238,30 @@ export const CampaignList = (props) => {
                   {allowColumns?.audience && (
                     <td>{campaign?.audience_type}</td>
                   )}
+                  {allowColumns?.in_queue && (
+                    <td>
+                      {
+                        ((typeof campaign?.audience_count !== 'undefined') && (typeof campaign?.sent_count !== 'undefined'))
+                          ? (campaign?.audience_count - campaign?.sent_count)
+                          : 0
+                      }
+                    </td>
+                  )}
                   {allowColumns?.sent_count && (
-                    <td>{campaign?.sent_count}</td>
+                    <td>{campaign?.sent_count || 0}</td>
                   )}
                   {allowColumns?.open_count && (
-                    <td>{campaign?.open_count}</td>
+                    <td>
+                      <LinkText onClick={() => handleOpens(campaign)} className='opens'>
+                        {campaign?.open_count || 0}
+                      </LinkText>
+                    </td>
                   )}
                   {allowColumns?.unsubscribed_count && (
-                    <td>{campaign?.unsubscribed_count}</td>
+                    <td>{campaign?.unsubscribed_count || 0}</td>
                   )}
                   {allowColumns?.bounced_count && (
-                    <td>{campaign?.bounced_count}</td>
+                    <td>{campaign?.bounced_count || 0}</td>
                   )}
                   <td>
                     {campaign?.audience_type === 'dynamic' && (
@@ -270,6 +305,17 @@ export const CampaignList = (props) => {
           )}
         </PagesBottomContainer>
       )}
+      <Modal
+        width='700px'
+        height='80vh'
+        padding='30px'
+        open={openModal}
+        onClose={() => setOpenModal(false)}
+      >
+        <CampaignUserList
+          campaignId={selectedCampaign?.id}
+        />
+      </Modal>
     </>
   )
 }