feat: support to send alert message with details (#887)

* misc: use notification panel from local project

* misc: support to show details in alert

* feat: new style alert message

* misc: update customized alert icon

src/components/AlertRenderer/CustomizedAlert.tsx

@@ -0,0 +1,115 @@
+import React from 'react';
+import {
+  styled,
+  RcTypography,
+  RcLink,
+  RcIcon,
+  palette2,
+} from '@ringcentral/juno';
+import {
+  ReportAnIssue,
+  InfoBorder,
+  Check,
+} from '@ringcentral/juno-icon';
+
+const Container = styled.div`
+  display: flex;
+  flex-direction: column;
+`;
+
+const StyledIcon = styled(RcIcon)`
+  margin-right: 6px;
+  vertical-align: middle;
+  display: inline-block;
+`;
+
+const DetailContainer = styled.div`
+  margin-top: 4px;
+`;
+
+const DetailTitle = styled(RcTypography)`
+  margin: 4px 0;
+`;
+
+const ItemText = styled(RcTypography)`
+  margin-bottom: 4px;
+`;
+
+function Detail({ title, items, onLinkClick }) {
+  return (
+    <DetailContainer>
+      <DetailTitle variant="body2">
+        {title}
+      </DetailTitle>
+      {
+        items.map((item, idx) => {
+          if (item.type === 'text' && item.text) {
+            return (
+              <ItemText key={idx} variant="body1">
+                {item.text}
+              </ItemText>
+            )
+          }
+          if (item.type === 'link' && item.text) {
+            return (
+              <ItemText key={idx}>
+                <RcLink
+                  href={item.href}
+                  onClick={() => onLinkClick(item.id)}
+                  target="_blank"
+                >
+                  {item.text}
+                </RcLink>
+              </ItemText>
+            );
+          }
+          return null;
+        })
+      }
+    </DetailContainer>
+  );
+}
+
+const StyleMessage = styled(RcTypography)`
+  font-size: 1rem;
+  line-height: 1.5rem;
+`;
+
+export function CustomizedAlert({
+  message,
+  showMore = false,
+  onLinkClick,
+}) {
+  const { payload, level } = message;
+  let icon = InfoBorder;
+  let iconColor;
+  if (level === 'danger') {
+    icon = ReportAnIssue;
+    iconColor = 'danger.f02';
+  } else if (level === 'success') {
+    icon = Check;
+    iconColor = 'success.f02';
+  }
+  return (
+    <Container>
+      <StyleMessage>
+        <StyledIcon
+          symbol={icon}
+          size="small"
+          color={iconColor}
+        />
+        {payload && payload.alertMessage}
+      </StyleMessage>
+      {showMore && payload.details && payload.details.length > 0 && (
+        payload.details.map((detail, idx) => (
+          <Detail
+            key={idx}
+            title={detail.title}
+            items={detail.items}
+            onLinkClick={onLinkClick}
+          />
+        ))
+      )}
+    </Container>
+  )
+}

src/components/AlertRenderer/index.js → src/components/AlertRenderer/index.tsx

@@ -3,12 +3,15 @@ import React from 'react';
 import FormattedMessage from '@ringcentral-integration/widgets/components/FormattedMessage';
 import { RcLink } from '@ringcentral/juno';
 import { styled } from '@ringcentral/juno/foundation';
+import { CustomizedAlert } from './CustomizedAlert';
 
 const StyledLink = styled(RcLink)`
   font-size: 13px;
 `;
 
-export function getAlertRenderer() {
+export function getAlertRenderer({
+  onThirdPartyLinkClick,
+}) {
   return (message) => {
     if (message.message === 'allowMicrophonePermissionOnInactiveTab') {
       return () => 'Please go to your first opened tab with this widget to allow microphone permission for this call.';
@@ -23,7 +26,15 @@ export function getAlertRenderer() {
       return () => 'Sorry, stopping recording is not supported for this call. Please contact your account administrator to enable "Allow mute in auto recording".';
     }
     if (message.message === 'showCustomAlertMessage') {
-      return () => message.payload.alertMessage;
+      return ({ message, showMore }) => {
+        return (
+          <CustomizedAlert
+            message={message}
+            showMore={showMore}
+            onLinkClick={onThirdPartyLinkClick}
+          />
+        );
+      }
     }
     if (message.message === 'noUnreadForOldMessages') {
       return () => 'Sorry, app can\'t mark old messages as unread.';