QT/bigcapital
1
0
Fork 0
mirror of https://github.com/bigcapitalhq/bigcapital.git synced 2026-02-16 12:50:38 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: Optimize SMS notification module.

Browse Source
This commit is contained in:
a.bouhuolia
2021-11-09 09:51:38 +02:00
parent 6d67d6163d
commit 48221a7af1
24 changed files with 479 additions and 141 deletions
Download Patch File Download Diff File Expand all files Collapse all files

123
src/containers/Preferences/SMSIntegration/components.js
View File

@@ -1,7 +1,10 @@
import React from 'react';
import intl from 'react-intl-universal';
import styled from 'styled-components';
import { ButtonLink } from 'components';
import { SwitchFieldCell } from 'components/DataTableCells';
import { safeCallback } from 'utils';
import { safeInvoke } from 'utils';
/**
* Notification accessor.
@@ -9,59 +12,95 @@ import { safeCallback } from 'utils';
export const NotificationAccessor = (row) => {
return (
<span className="notification">
<span className={'notification__label'}>{row.notification_label}</span>
<span className={'notification__desc'}>
<NotificationLabel>{row.notification_label}</NotificationLabel>
<NotificationDescription>
{row.notification_description}
</span>
</NotificationDescription>
</span>
);
};
/**
* SMS notification message cell.
*/
export const SMSMessageCell = ({
payload: { onEditSMSMessage },
row: { original },
}) => (
<div>
{original.sms_message}
<span
className="edit-text"
onClick={safeCallback(onEditSMSMessage, original)}
>
{'Edit'}
</span>
<MessageBox>{original.sms_message}</MessageBox>
<MessageBoxActions>
<ButtonLink onClick={() => safeInvoke(onEditSMSMessage, original)}>
Edit message
</ButtonLink>
</MessageBoxActions>
</div>
);
/**
* Retrieve SMS notifications messages table columns
* @returns
*/
export function useSMSIntegrationTableColumns() {
return React.useMemo(() => [
{
Header: intl.get('sms_message.label_Notification'),
accessor: NotificationAccessor,
className: 'notification',
width: '180',
},
{
Header: intl.get('service'),
accessor: 'module_formatted',
className: 'service',
width: '80',
},
{
Header: intl.get('sms_message.label_mesage'),
accessor: 'sms_message',
Cell: SMSMessageCell,
className: 'sms_message',
clickable: true,
width: '180',
},
{
Header: intl.get('sms_message.label_auto'),
accessor: 'is_notification_enabled',
Cell: SwitchFieldCell,
className: 'is_notification_enabled',
disableSortBy: true,
disableResizing: true,
width: '80',
},
]);
return React.useMemo(
() => [
{
Header: intl.get('sms_message.label_Notification'),
accessor: NotificationAccessor,
className: 'notification',
width: '180',
},
{
Header: intl.get('service'),
accessor: 'module_formatted',
className: 'service',
width: '80',
},
{
Header: intl.get('sms_message.label_mesage'),
accessor: 'sms_message',
Cell: SMSMessageCell,
className: 'sms_message',
clickable: true,
width: '180',
},
{
Header: intl.get('sms_message.label_auto'),
accessor: 'is_notification_enabled',
Cell: SwitchFieldCell,
className: 'is_notification_enabled',
disableSortBy: true,
disableResizing: true,
width: '80',
},
],
[],
);
}
const NotificationLabel = styled.div`
font-weight: 500;
`;
const NotificationDescription = styled.div`
font-size: 14px;
margin-top: 6px;
display: block;
opacity: 0.75;
`;
const MessageBox = styled.div`
padding: 10px;
background-color: #fbfbfb;
border: 1px dashed #dcdcdc;
font-size: 14px;
line-height: 1.45;
`;
const MessageBoxActions = styled.div`
margin-top: 2px;
button {
font-size: 12px;
}
`;