feat: Optimize SMS notification module.

src/components/DialogsContainer.js

@@ -50,10 +50,12 @@ export default function DialogsContainer() {
       <ReceiptPdfPreviewDialog dialogName={'receipt-pdf-preview'} />
       <MoneyInDialog dialogName={'money-in'} />
       <MoneyOutDialog dialogName={'money-out'} />
+
       <NotifyInvoiceViaSMSDialog dialogName={'notify-invoice-via-sms'} />
       <NotifyReceiptViaSMSDialog dialogName={'notify-receipt-via-sms'} />
       <NotifyEstimateViaSMSDialog dialogName={'notify-estimate-via-sms'} />
       <NotifyPaymentReceiveViaSMSDialog dialogName={'notify-payment-via-sms'} />
+
       <BadDebtDialog dialogName={'write-off-bad-debt'} />
       <SMSMessageDialog dialogName={'sms-message-form'} />
     </div>

src/components/SMSPreview/index.js

@@ -0,0 +1,46 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import { Icon } from 'components';
+
+/**
+ * SMS Message preview.
+ */
+export function SMSMessagePreview({
+  message,
+  iconWidth = '265px',
+  iconHeight = '287px',
+  iconColor = '#adadad',
+}) {
+  return (
+    <SMSMessagePreviewBase>
+      <Icon
+        icon={'sms-message-preview'}
+        width={iconWidth}
+        height={iconHeight}
+        color={iconColor}
+      />
+      <SMSMessageText>{message}</SMSMessageText>
+    </SMSMessagePreviewBase>
+  );
+}
+
+const SMSMessageText = styled.div`
+  position: absolute;
+  top: 61px;
+  padding: 12px;
+  color: #fff;
+  border-radius: 12px;
+  margin-left: 12px;
+  margin-right: 12px;
+  overflow-wrap: break-word;
+  background: #2fa2e4;
+  font-size: 13px;
+  line-height: 1.6;
+`;
+
+const SMSMessagePreviewBase = styled.div`
+  position: relative;
+  width: 265px;
+  margin: 0 auto;
+`;

src/components/index.js

@@ -87,6 +87,7 @@ export * from './IntersectionObserver';
 export * from './Datatable/CellForceWidth';
 export * from './Button';
 export * from './IntersectionObserver';
+export * from './SMSPreview';
 
 const Hint = FieldHint;