Skip to content

Commit

Permalink
feat: added attachment section on preview email (#284)
Browse files Browse the repository at this point in the history
  • Loading branch information
@giuliano176
giuliano176 authored Jan 3, 2023
1 parent a87b1d3 commit c2def3f
Show file tree
Hide file tree
Showing 5 changed files with 44 additions and 122 deletions.
46 changes: 35 additions & 11 deletions src/commons/preview-eml.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,19 +4,19 @@
* SPDX-License-Identifier: AGPL-3.0-only
*/

import { forEach, reduce, map, filter, isEmpty } from 'lodash';
import { t } from '@zextras/carbonio-shell-ui';
import { filter, forEach, isEmpty, map, reduce } from 'lodash';
import moment from 'moment';
import { TFunction } from 'i18next';
import productLogo from '../assets/logo-product-grey.png';
import logo from '../assets/zextras-logo-gray.png';
import { MailMessage, Participant } from '../types';
import {
plainTextToHTML,
findAttachments,
plainTextToHTML,
_CI_REGEX,
_CI_SRC_REGEX
} from './mail-message-renderer';
import logo from '../assets/zextras-logo-gray.png';
import productLogo from '../assets/logo-product-grey.png';
import { getAvatarLabel } from './useGetAvatarLabel';
import { MailMessage, Participant } from '../types';

const getParticipantHeader = (participants: Participant[], type: string): string => {
const participantsList = map(
Expand Down Expand Up @@ -67,7 +67,7 @@ export const getBodyWrapper = ({
`;
};

export const getErrorPage = (t: TFunction): string =>
export const getErrorPage = (): string =>
`<!DOCTYPE html>
<html>
<head>
Expand Down Expand Up @@ -177,7 +177,7 @@ export const getCompleteHTMLForEML = ({ content }: { content: string }): string
body {
max-width: 100% !important;
margin: 0;
overflow-y: hidden;
overflow-y: auto;
font-family: Roboto, sans-serif !important;
font-size: 0.875rem;
background-color: #ffffff;
Expand Down Expand Up @@ -260,6 +260,29 @@ export const getCompleteHTMLForEML = ({ content }: { content: string }): string
</body>
</html>`;

const getAttachments = ({ msg }: { msg: MailMessage }): string => `<tr>
<td style="
width: auto;
padding: 0.1875rem 0 0.1875rem 0;
vertical-align: top;
text-align: left;
font-weight: bold;
white-space: nowrap;
">${t('label.attachment', {
count: msg.attachments?.length,
defaultValue: 'Attachment',
defaultValue_plural: 'Attachments'
})}: <span style="padding: 0.1875rem 0.1875rem 0.1875rem 0.1875rem; vertical-align: top; overflow: hidden; color: #828282;font-family: Roboto;
font-style: normal;
font-weight: 400;
font-size: 0.875rem;
line-height: 1.3125rem;">${map(
msg.attachments,
(item) =>
`<a href=/service/home/~/?auth=co&id=${msg.id}&part=${item.part} >${item.filename}</a>`
).join(' ')}</span></td>
</tr>`;
const getEMLHeader = (msg: MailMessage, content: string): string => {
const { participants } = msg;
const from = filter(participants, { type: 'f' });
Expand All @@ -275,9 +298,9 @@ const getEMLHeader = (msg: MailMessage, content: string): string => {
<td colspan="2">
<table style="padding:0.625rem;width:100%;" >
<tr>
<td style="width:3.125rem;">
<div style="width:3rem;height:3rem;border-radius:50%;background:skyblue;margin-left:0.625rem;">
<p style="text-align:center;line-height:3.125rem">
<td style="width:3.125rem;vertical-align:top">
<div style="width:3rem;height:3rem;border-radius:50%;background:skyblue;margin-left:0.625rem;margin-top:0px">
<p style="text-align:center;line-height:3.125rem;margin-top:0.25rem">
${getAvatarLabel(from?.[0]?.fullName ?? from?.[0]?.address)}
</p>
</div>
Expand All @@ -289,6 +312,7 @@ const getEMLHeader = (msg: MailMessage, content: string): string => {
${getParticipantHeader(cc, 'Cc')}
${getParticipantHeader(bcc, 'Bcc')}
${getParticipantHeader(replyTo, 'Reply To')}
${getAttachments({ msg })}
</table>
</td>
<td style="vertical-align: text-top;">
Expand Down
108 changes: 2 additions & 106 deletions src/commons/print-conversation.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,16 +4,14 @@
* SPDX-License-Identifier: AGPL-3.0-only
*/

import { forEach, reduce, map, filter, isEmpty } from 'lodash';
import { filter, forEach, isEmpty, map, reduce } from 'lodash';
import moment from 'moment';
import {
plainTextToHTML,
findAttachments,
plainTextToHTML,
_CI_REGEX,
_CI_SRC_REGEX
} from './mail-message-renderer';
import logo from '../assets/zextras-logo-gray.png';
import productLogo from '../assets/logo-product-grey.png';

export const getCompleteHTML = ({ content, account }) =>
` <html>
Expand Down Expand Up @@ -264,105 +262,3 @@ export const getContentForPrint = ({ messages, account, conversations, isMsg = f

return getCompleteHTML({ content, account });
};

export const getErrorPage = (t) =>
`<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>${t('label.error', 'Error')}</title>
<style>
html, body, .container {
width: 100%;
height: 100%;
overflow: hidden;
}
body {
background-color: #ffffff;
color: #4d4d4d;
font-size: 0.8125rem;
font-family: Roboto, sans-serif;
}
.container {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.mainTextWrapper {
color: #2b73d2;
font-weight: 900;
font-size: 1.625rem;
line-height: 1.5rem;
margin-top: 1.875rem;
}
.errorWrapper {
display: flex;
flex-direction: row;
align-items: center;
margin: 1.4375rem 0 0.625rem;
}
.line {
height: 0.0625rem;
width: 6.25rem;
background-color: gray;
}
.errorCode {
color: #4d4d4d;
font-weight: 300;
font-size: 0.875rem;
line-height: 1.3125rem;
padding: 0 3.125rem;
text-transform: uppercase;
}
.customText {
margin: 0 0.3125rem 0 0;
color: #414141;
}
.needSupportText {
color: #414141;
font-size: 0.9375rem;
}
.poweredByZextras {
display: flex;
margin: 1.875rem 0 0 0;
}
.zextrasLogo {
top: 0.1875rem;
position: relative;
}
.productLogo {
height: 4.6875rem;
width: 35.25rem;
}
</style>
</head>
<body>
<div class="container">
<div class="productLogo" >
<img src=${productLogo} width="564" height="75"/>
</div>
<div class="mainTextWrapper">
${t('messages.could_not_find_to_show', 'Sorry, we couldn’t find anything to show')}
</div>
<div class="errorWrapper">
<div class="line"></div>
<div class="errorCode"><p>${t(
'messages.something_went_wrong',
'SOMETHING WENT WRONG'
)}</p></div>
<div class="line"></div>
</div>
<p class="needSupportText">${t(
'messages.check_and_try_again',
'Please, check Carbonio and try again'
)}</p>
<div class="poweredByZextras">
<p class="customText">${t('messages.powered_by', 'powered by')}</p>
<div class="zextrasLogo">
<img src=${logo} height="10" width="63"/>
</div>
</div>
</div>
</body>
</html>`;
5 changes: 3 additions & 2 deletions src/ui-actions/conversation-actions.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,10 +17,11 @@ import { Dispatch } from '@reduxjs/toolkit';
import { convAction, getMsgsForPrint } from '../store/actions';
import DeleteConvConfirm from './delete-conv-modal';
import MoveConvMessage from './move-conv-msg';
import { getContentForPrint, getErrorPage } from '../commons/print-conversation';
import { getContentForPrint } from '../commons/print-conversation';
import { applyTag } from './tag-actions';
import { StoreProvider } from '../store/redux';
import { Conversation, MailMessage } from '../types';
import { getErrorPage } from '../commons/preview-eml';

type ConvActionIdsType = Array<string>;
type ConvActionValueType = string | boolean;
Expand Down Expand Up @@ -196,7 +197,7 @@ export function printConversation({
}
})
.catch((err) => {
const errorContent = getErrorPage(t);
const errorContent = getErrorPage();
if (printWindow) printWindow.document.write(errorContent);
});
}
Expand Down
5 changes: 3 additions & 2 deletions src/ui-actions/message-actions.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,10 +23,11 @@ import { sendMsg } from '../store/actions/send-msg';
import MoveConvMessage from './move-conv-msg';
import DeleteConvConfirm from './delete-conv-modal';
import RedirectAction from './redirect-message-action';
import { getContentForPrint, getErrorPage } from '../commons/print-conversation';
import { getContentForPrint } from '../commons/print-conversation';
import { applyTag } from './tag-actions';
import { MailMessage, MsgActionParameters, MsgActionResult } from '../types';
import { StoreProvider } from '../store/redux';
import { getErrorPage } from '../commons/preview-eml';

type MessageActionIdsType = Array<string>;
type MessageActionValueType = string | boolean;
Expand Down Expand Up @@ -207,7 +208,7 @@ export function printMsg({
}
})
.catch(() => {
const errorContent = getErrorPage(t);
const errorContent = getErrorPage();
if (printWindow) printWindow.document.write(errorContent);
});
}
Expand Down
2 changes: 1 addition & 1 deletion src/views/app/detail-panel/preview/attachments-block.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -280,7 +280,7 @@ const Attachment: FC<AttachmentType> = ({
}
})
.catch(() => {
const errorContent = getErrorPage(t);
const errorContent = getErrorPage();
printWindow && printWindow.document.write(errorContent);
});
}, [att?.name, message]);
Expand Down

0 comments on commit c2def3f

Please sign in to comment.