varnitgoyal95/collection-portal
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Revert "Revert "TP-66600| varshitha |WhatsAppChat formatting (#992)" (#1030)" (#1032)

Browse Source 
This reverts commit f43e35cd47.
This commit is contained in:
Varnit Goyal
2024-07-03 13:23:32 +05:30
committed by GitHub
parent bae7b4b4a2
commit 1cf5e84bc5
26 changed files with 1179 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
index.html
View File

@@ -97,6 +97,10 @@
></script>
<script type="application/javascript" src="/firebase-messaging-sw.js"></script>
<script type="module" src="/src/main.tsx"></script>
<!-- This script is required for draft JS -->
<script>
const global = globalThis;
</script>
<!-- MS clarity -->
<script type="text/javascript">

5
package.json
View File

@@ -41,6 +41,7 @@
}
},
"dependencies": {
"@draft-js-plugins/emoji": "4.0.0",
"@elastic/apm-rum": "^5.10.2",
"@fingerprintjs/fingerprintjs": "^3.3.3",
"@floating-ui/dom": "1.5.3",
@@ -54,6 +55,7 @@
"@googlemaps/js-api-loader": "^1.16.2",
"@reduxjs/toolkit": "^1.7.2",
"@sentry/browser": "7.13.0",
"@types/draft-js": "^0.11.18",
"@types/highcharts": "^7.0.0",
"@types/react-infinite-scroller": "1.2.5",
"@types/react-transition-group": "^4.4.5",
@@ -65,6 +67,9 @@
"classnames": "^2.3.1",
"crypto-js": "^4.2.0",
"dayjs": "^1.11.9",
"draft-js": "^0.11.7",
"draft-js-export-markdown": "^1.4.0",
"draft-js-import-markdown": "^1.4.1",
"firebase": "^8.8.0",
"highcharts": "^10.3.3",
"highcharts-react": "^0.0.3",

3
src/assets/icons/whatsAppChatbot/BoldIcon.svg Normal file
View File

@@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
<path d="M7.51136 18V6.36364H12.1705C13.0265 6.36364 13.7405 6.49053 14.3125 6.74432C14.8845 6.99811 15.3144 7.35038 15.6023 7.80114C15.8902 8.24811 16.0341 8.76326 16.0341 9.34659C16.0341 9.80114 15.9432 10.2008 15.7614 10.5455C15.5795 10.8864 15.3295 11.1667 15.0114 11.3864C14.697 11.6023 14.3371 11.7557 13.9318 11.8466V11.9602C14.375 11.9792 14.7898 12.1042 15.1761 12.3352C15.5663 12.5663 15.8826 12.8902 16.125 13.3068C16.3674 13.7197 16.4886 14.2121 16.4886 14.7841C16.4886 15.4015 16.3352 15.9527 16.0284 16.4375C15.7254 16.9186 15.2765 17.2992 14.6818 17.5795C14.0871 17.8598 13.3542 18 12.483 18H7.51136ZM9.97159 15.9886H11.9773C12.6629 15.9886 13.1629 15.858 13.4773 15.5966C13.7917 15.3314 13.9489 14.9792 13.9489 14.5398C13.9489 14.2178 13.8712 13.9337 13.7159 13.6875C13.5606 13.4413 13.339 13.2481 13.0511 13.108C12.767 12.9678 12.428 12.8977 12.0341 12.8977H9.97159V15.9886ZM9.97159 11.233H11.7955C12.1326 11.233 12.4318 11.1742 12.6932 11.0568C12.9583 10.9356 13.1667 10.7652 13.3182 10.5455C13.4735 10.3258 13.5511 10.0625 13.5511 9.75568C13.5511 9.33523 13.4015 8.99621 13.1023 8.73864C12.8068 8.48106 12.3864 8.35227 11.8409 8.35227H9.97159V11.233Z" fill="#969696"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.3 KiB

8
src/assets/icons/whatsAppChatbot/EmojiIcon.svg Normal file
View File

@@ -0,0 +1,8 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
<mask id="mask0_4960_72974" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="24" height="24">
<rect width="24" height="24" fill="#D9D9D9"/>
</mask>
<g mask="url(#mask0_4960_72974)">
<path d="M15.2268 10.8704C15.5716 10.8704 15.8639 10.7498 16.1038 10.5085C16.3436 10.2672 16.4636 9.97415 16.4636 9.62942C16.4636 9.2847 16.3429 8.99241 16.1016 8.75253C15.8603 8.51266 15.5673 8.39272 15.2226 8.39272C14.8778 8.39272 14.5855 8.51338 14.3457 8.75469C14.1058 8.99598 13.9858 9.289 13.9858 9.63373C13.9858 9.97845 14.1065 10.2707 14.3478 10.5106C14.5891 10.7505 14.8821 10.8704 15.2268 10.8704ZM8.77745 10.8704C9.12216 10.8704 9.41446 10.7498 9.65433 10.5085C9.89422 10.2672 10.0142 9.97415 10.0142 9.62942C10.0142 9.2847 9.89351 8.99241 9.6522 8.75253C9.41089 8.51266 9.11788 8.39272 8.77316 8.39272C8.42844 8.39272 8.13614 8.51338 7.89625 8.75469C7.65637 8.99598 7.53644 9.289 7.53644 9.63373C7.53644 9.97845 7.65709 10.2707 7.8984 10.5106C8.13972 10.7505 8.43273 10.8704 8.77745 10.8704ZM12.0016 21C10.7568 21 9.58677 20.7638 8.49148 20.2914C7.39618 19.8189 6.44342 19.1778 5.63322 18.368C4.82299 17.5581 4.18157 16.6058 3.70894 15.511C3.23631 14.4162 3 13.2464 3 12.0016C3 10.7568 3.23621 9.58677 3.70863 8.49148C4.18106 7.39618 4.82219 6.44343 5.63203 5.63322C6.44189 4.823 7.39423 4.18157 8.48904 3.70894C9.58384 3.23631 10.7536 3 11.9984 3C13.2432 3 14.4132 3.23621 15.5085 3.70863C16.6038 4.18106 17.5566 4.82219 18.3668 5.63203C19.177 6.44189 19.8184 7.39423 20.2911 8.48904C20.7637 9.58384 21 10.7536 21 11.9984C21 13.2432 20.7638 14.4132 20.2914 15.5085C19.8189 16.6038 19.1778 17.5566 18.368 18.3668C17.5581 19.177 16.6058 19.8184 15.511 20.2911C14.4162 20.7637 13.2464 21 12.0016 21ZM12 19.579C14.1158 19.579 15.9079 18.8448 17.3763 17.3763C18.8448 15.9079 19.579 14.1158 19.579 12C19.579 9.88421 18.8448 8.0921 17.3763 6.62367C15.9079 5.15525 14.1158 4.42103 12 4.42103C9.8842 4.42103 8.09209 5.15525 6.62367 6.62367C5.15525 8.0921 4.42103 9.88421 4.42103 12C4.42103 14.1158 5.15525 15.9079 6.62367 17.3763C8.09209 18.8448 9.8842 19.579 12 19.579ZM12 16.919C12.8503 16.919 13.6346 16.7177 14.353 16.3151C15.0714 15.9125 15.6547 15.3662 16.1031 14.6763C16.1928 14.5039 16.19 14.3305 16.0946 14.1562C15.9993 13.9819 15.8502 13.8947 15.6474 13.8947H8.35265C8.14981 13.8947 8.00072 13.9819 7.90537 14.1562C7.81003 14.3305 7.8072 14.5039 7.89686 14.6763C8.34526 15.3662 8.93229 15.9125 9.65798 16.3151C10.3837 16.7177 11.1644 16.919 12 16.919Z" fill="#969696"/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.5 KiB

25
src/assets/icons/whatsAppChatbot/EmojiIcon.tsx Normal file
View File

@@ -0,0 +1,25 @@
const EmojiIcon = () => {
return (
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
<mask
id="mask0_4960_71828"
style={{ maskType: 'alpha' }}
maskUnits="userSpaceOnUse"
x="0"
y="0"
width="24"
height="24"
>
<rect width="24" height="24" fill="#D9D9D9" />
</mask>
<g mask="url(#mask0_4960_71828)">
<path
d="M15.2268 10.8704C15.5716 10.8704 15.8639 10.7498 16.1038 10.5085C16.3436 10.2672 16.4636 9.97415 16.4636 9.62942C16.4636 9.2847 16.3429 8.99241 16.1016 8.75253C15.8603 8.51266 15.5673 8.39272 15.2226 8.39272C14.8778 8.39272 14.5855 8.51338 14.3457 8.75469C14.1058 8.99598 13.9858 9.289 13.9858 9.63373C13.9858 9.97845 14.1065 10.2707 14.3478 10.5106C14.5891 10.7505 14.8821 10.8704 15.2268 10.8704ZM8.77745 10.8704C9.12216 10.8704 9.41446 10.7498 9.65433 10.5085C9.89422 10.2672 10.0142 9.97415 10.0142 9.62942C10.0142 9.2847 9.89351 8.99241 9.6522 8.75253C9.41089 8.51266 9.11788 8.39272 8.77316 8.39272C8.42844 8.39272 8.13614 8.51338 7.89625 8.75469C7.65637 8.99598 7.53644 9.289 7.53644 9.63373C7.53644 9.97845 7.65709 10.2707 7.8984 10.5106C8.13972 10.7505 8.43273 10.8704 8.77745 10.8704ZM12.0016 21C10.7568 21 9.58677 20.7638 8.49148 20.2914C7.39618 19.8189 6.44342 19.1778 5.63322 18.368C4.82299 17.5581 4.18157 16.6058 3.70894 15.511C3.23631 14.4162 3 13.2464 3 12.0016C3 10.7568 3.23621 9.58677 3.70863 8.49148C4.18106 7.39618 4.82219 6.44343 5.63203 5.63322C6.44189 4.823 7.39423 4.18157 8.48904 3.70894C9.58384 3.23631 10.7536 3 11.9984 3C13.2432 3 14.4132 3.23621 15.5085 3.70863C16.6038 4.18106 17.5566 4.82219 18.3668 5.63203C19.177 6.44189 19.8184 7.39423 20.2911 8.48904C20.7637 9.58384 21 10.7536 21 11.9984C21 13.2432 20.7638 14.4132 20.2914 15.5085C19.8189 16.6038 19.1778 17.5566 18.368 18.3668C17.5581 19.177 16.6058 19.8184 15.511 20.2911C14.4162 20.7637 13.2464 21 12.0016 21ZM12 19.579C14.1158 19.579 15.9079 18.8448 17.3763 17.3763C18.8448 15.9079 19.579 14.1158 19.579 12C19.579 9.88421 18.8448 8.0921 17.3763 6.62367C15.9079 5.15525 14.1158 4.42103 12 4.42103C9.8842 4.42103 8.09209 5.15525 6.62367 6.62367C5.15525 8.0921 4.42103 9.88421 4.42103 12C4.42103 14.1158 5.15525 15.9079 6.62367 17.3763C8.09209 18.8448 9.8842 19.579 12 19.579ZM12 16.919C12.8503 16.919 13.6346 16.7177 14.353 16.3151C15.0714 15.9125 15.6547 15.3662 16.1031 14.6763C16.1928 14.5039 16.19 14.3305 16.0946 14.1562C15.9993 13.9819 15.8502 13.8947 15.6474 13.8947H8.35265C8.14981 13.8947 8.00072 13.9819 7.90537 14.1562C7.81003 14.3305 7.8072 14.5039 7.89686 14.6763C8.34526 15.3662 8.93229 15.9125 9.65798 16.3151C10.3837 16.7177 11.1644 16.919 12 16.919Z"
fill="#969696"
/>
</g>
</svg>
);
};
export default EmojiIcon;

3
src/assets/icons/whatsAppChatbot/ItalicIcon.svg Normal file
View File

@@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
<path d="M13.5227 6.36364L11.5909 18H10.1818L12.1136 6.36364H13.5227Z" fill="#969696"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 190 B

4
src/assets/icons/whatsAppChatbot/UnderlineIcon.svg Normal file
View File

@@ -0,0 +1,4 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
<path d="M15.0455 6.36364H16.4545V14.0682C16.4545 14.8636 16.267 15.5739 15.892 16.1989C15.5208 16.8201 14.9962 17.3106 14.3182 17.6705C13.6402 18.0265 12.8447 18.2045 11.9318 18.2045C11.0189 18.2045 10.2235 18.0265 9.54545 17.6705C8.86742 17.3106 8.34091 16.8201 7.96591 16.1989C7.5947 15.5739 7.40909 14.8636 7.40909 14.0682V6.36364H8.81818V13.9545C8.81818 14.5227 8.94318 15.0284 9.19318 15.4716C9.44318 15.911 9.79924 16.2576 10.2614 16.5114C10.7273 16.7614 11.2841 16.8864 11.9318 16.8864C12.5795 16.8864 13.1364 16.7614 13.6023 16.5114C14.0682 16.2576 14.4242 15.911 14.6705 15.4716C14.9205 15.0284 15.0455 14.5227 15.0455 13.9545V6.36364Z" fill="#969696"/>
<path d="M6 21.1818H17.8636V22.2727H6V21.1818Z" fill="#969696"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 831 B

4
src/assets/styles/variables.scss
View File

@@ -107,6 +107,8 @@
--navi-row-color: #f8fbff;
--pop-up-highlight: #fee5c4;
--geolocation-stepper-ellipse-color: #67acfe;
--emoji-poopupover-color: #bdbdbd;
--emoji-select-popover-entry-icon-color: #ededed;
--incentive-green: #2b5a2a;
@@ -172,6 +174,7 @@
--z-index-autocomplete-picker: 100;
--z-index-maps-loader-overlay: 100;
--z-index-sticky-note: 999;
--z-index-emoji-popover: 1000;
--z-index-audio-player: 1001;
--z-index-leaderboard-overlay-active: 1002;
--z-index-leaderboard-active: 1003;
@@ -181,7 +184,6 @@
--z-index-nested-picker: 999999;
--z-index-toast: 999999;
--z-index-tooltip: 999999;
--z-index-payment-done-modal: 1000000;
--z-index-geolocation-card: 2;
--z-index-ameyo-tooltip: 1000000;
--z-index-payment-done-modal: 1000001;

26
src/components/TooltipV2/TooltipV2.tsx
View File

@@ -13,11 +13,12 @@ import {
useMergeRefs,
FloatingPortal,
FloatingArrow,
hide
hide,
safePolygon
} from '@floating-ui/react';
import type { Placement } from '@floating-ui/react';
import { arrow } from '@floating-ui/dom';
import { RefObject, useRef } from 'react';
import { RefObject, useEffect, useRef } from 'react';
import cx from 'classnames';
import styles from './TooltipV2.module.scss';
@@ -32,6 +33,8 @@ interface TooltipOptions {
hiddenPadding?: number;
tooltipGap?: number;
hideStrategy?: HideStrategy;
mainAxisOffset?: number;
crossAxisOffset?: number;
}
interface TooltipContentProps extends React.HTMLProps<HTMLDivElement> {
@@ -57,7 +60,9 @@ export function useTooltip({
arrowRef,
hiddenPadding = 16,
tooltipGap = 7,
hideStrategy = 'escaped'
hideStrategy = 'escaped',
mainAxisOffset = 0,
crossAxisOffset = 0
}: TooltipOptions = {}) {
const [uncontrolledOpen, setUncontrolledOpen] = React.useState(initialOpen);
@@ -71,6 +76,10 @@ export function useTooltip({
whileElementsMounted: autoUpdate,
middleware: [
offset(tooltipGap),
offset({
mainAxis: mainAxisOffset,
crossAxis: crossAxisOffset
}),
flip({
crossAxis: placement.includes('-'),
fallbackAxisSideDirection: 'start',
@@ -89,15 +98,20 @@ export function useTooltip({
const hover = useHover(context, {
move: false,
enabled: controlledOpen == null
enabled: controlledOpen == null,
handleClose: safePolygon()
});
const focus = useFocus(context, {
enabled: controlledOpen == null
});
const dismiss = useDismiss(context);
const dismiss = useDismiss(context, {
referencePress: true,
outsidePress: true
});
const role = useRole(context, { role: 'tooltip' });
const interactions = useInteractions([hover, focus, dismiss, role]);
const interactions = useInteractions([hover, dismiss, role]);
return React.useMemo(
() => ({

108
src/pages/WhatsappChatbot/components/ChatFormatter/ChatReplyEditor.tsx Normal file
View File

@@ -0,0 +1,108 @@
import React, { useEffect, useRef, useState } from 'react';
import { EditorState, convertFromRaw, ContentState, convertToRaw, Editor } from 'draft-js';
import RichTextEditor from '../RichTextEditor/RichTextEditor';
import { RawContentState, WHATSAPPCHAT_EDITOR_TOOLBAR_OPTIONS } from '../../constants';
import parseMessage from './DraftjsToStringParser';
import EmojiSelect from '@draft-js-plugins/emoji/lib/components/EmojiSelect';
import { sendChatMessage } from '@cp/pages/WhatsappChatbot/actions';
import { ChatSender, MessageType } from '@cp/pages/WhatsappChatbot/types';
import { useDispatch, useSelector } from 'react-redux';
import { RootState } from '@cp/src/store';
import { GenericObject } from '@cp/src/types/CommonConstans';
interface ChatReplyEditorProps {
defaultValue?: string | RawContentState;
onReplyChange: (event: React.ChangeEvent<HTMLTextAreaElement>) => void;
error?: string;
showToolbar?: boolean;
plugins?: any[];
toolBarStyles?: string;
onKeyDown: (event: React.KeyboardEvent<HTMLTextAreaElement>) => void;
setChatMessageContent: React.Dispatch<React.SetStateAction<string>>;
editorState: EditorState;
prevContentStateRef: React.MutableRefObject<Draft.RawDraftContentState>;
handleEditorChange: (newEditorState: EditorState) => void;
editorRef: React.RefObject<Editor>;
placeholder?: string;
id?: string;
templateId?: string;
isTemplateTriggerButtonDisabled?: boolean;
isTemplateTriggered?: boolean;
placeholderData?: GenericObject;
chatMessageContent?: string | undefined;
chatSender: ChatSender;
}
const ChatReplyEditor: React.FC<ChatReplyEditorProps> = ({
onReplyChange,
defaultValue,
error,
showToolbar,
plugins,
toolBarStyles,
onKeyDown,
setChatMessageContent,
editorState,
prevContentStateRef,
handleEditorChange,
editorRef,
placeholder,
id,
isTemplateTriggerButtonDisabled,
templateId,
placeholderData,
isTemplateTriggered,
chatMessageContent,
chatSender
}) => {
const agentRefId = useSelector((state: RootState) => state?.common?.userData?.referenceId);
const serverDate = useSelector((state: RootState) => state?.common?.serverDate);
const currentChat = useSelector((state: RootState) => state?.whatsappChatbot?.currentChat);
const chatReferenceId = currentChat?.referenceId;
const dispatch = useDispatch();
const serverDateObject = typeof serverDate === 'string' ? new Date(serverDate) : serverDate;
useEffect(() => {
prevContentStateRef.current = convertToRaw(editorState.getCurrentContent());
}, [editorState]);
const handleSendMessage = () => {
//send message
if (chatReferenceId && agentRefId) {
dispatch(
sendChatMessage({
date: serverDateObject,
chatSender,
chatReferenceId,
messageType: isTemplateTriggered ? MessageType.TEMPLATE : MessageType.TEXT,
messageContent: chatMessageContent || ' ',
agentReferenceId: agentRefId,
setChatMessageContent,
templateId: templateId,
placeholderData: placeholderData
})
);
}
};
return (
<>
<RichTextEditor
id={id}
richUtilProps={{
toolBarOptions: WHATSAPPCHAT_EDITOR_TOOLBAR_OPTIONS
}}
editorState={editorState}
onChange={handleEditorChange}
placeholder={placeholder ? placeholder : error || 'Type your reply here...'}
showToolbar={showToolbar}
error={error}
plugins={plugins}
toolBarStyles={toolBarStyles}
editorRef={editorRef}
handleSendMessage={handleSendMessage}
/>
</>
);
};
export default ChatReplyEditor;

77
src/pages/WhatsappChatbot/components/ChatFormatter/DraftjsToStringParser.tsx Normal file
View File

@@ -0,0 +1,77 @@
const parseMessage = (contentState: Draft.RawDraftContentState): string => {
let parsedText = '';
contentState.blocks.forEach(block => {
const blockText = block.text;
const styleRanges = block.inlineStyleRanges;
const entityRanges = block.entityRanges;
const ranges = [...styleRanges, ...entityRanges].sort((a, b) => a.offset - b.offset);
let currentIndex = 0;
let textWithEntitiesAndStyles = '';
while (currentIndex < blockText.length) {
const activeRanges = ranges.filter(range => range.offset >= currentIndex);
if (activeRanges.length === 0) {
textWithEntitiesAndStyles += blockText.slice(currentIndex);
break;
}
const nextRange = activeRanges[0];
if (nextRange.offset > currentIndex) {
textWithEntitiesAndStyles += blockText.slice(currentIndex, nextRange.offset);
currentIndex = nextRange.offset;
}
const offset = nextRange.offset;
const length = nextRange.length;
const styledText = blockText.slice(offset, offset + length).trim();
const isBold = styleRanges.some(
r => r.style === 'BOLD' && r.offset <= offset && r.offset + r.length >= offset + length
);
const isItalic = styleRanges.some(
r => r.style === 'ITALIC' && r.offset <= offset && r.offset + r.length >= offset + length
);
const isPartOfWord = /\w/.test(styledText) && /\w/.test(textWithEntitiesAndStyles.slice(-1));
if (
isPartOfWord &&
textWithEntitiesAndStyles.length > 0 &&
!/\s/.test(textWithEntitiesAndStyles.slice(-1))
) {
textWithEntitiesAndStyles += ' ';
}
if (isBold && isItalic) {
textWithEntitiesAndStyles += ` *_${styledText}_* `;
} else if (isBold) {
textWithEntitiesAndStyles += ` *${styledText}* `;
} else if (isItalic) {
textWithEntitiesAndStyles += ` _${styledText}_ `;
} else {
textWithEntitiesAndStyles += styledText;
}
if (
isPartOfWord &&
currentIndex + length < blockText.length &&
!/\s/.test(blockText[currentIndex + length])
) {
textWithEntitiesAndStyles += ' ';
}
currentIndex = offset + length;
}
parsedText += textWithEntitiesAndStyles.trim() + '\n';
});
return parsedText.trim();
};
export default parseMessage;

27
src/pages/WhatsappChatbot/components/ChatFormatter/MarkdownToHtml.tsx Normal file
View File

@@ -0,0 +1,27 @@
interface Props {
text: string;
breakLine?: boolean;
}
const MarkdownToHtml = ({ text, breakLine }: Props) => {
const convertMarkdownToHtml = (markdown: string): string => {
let html = markdown;
html = html.replace(/\*\*(.*?)\*\*/g, '<b>$1</b>');
html = html.replace(/\*(.*?)\*/g, '<b>$1</b>');
html = html.replace(/_(.*?)_/g, '<i>$1</i>');
html = html.replace(/:([a-z_]+):/g, (match, p1) => {
return `<span class="emoji">${p1}</span>`;
});
if (breakLine) html = html.replace(/\n/g, '<br/>');
return html;
};
const htmlContent = convertMarkdownToHtml(text);
return <div dangerouslySetInnerHTML={{ __html: htmlContent }} />;
};
export default MarkdownToHtml;

17
src/pages/WhatsappChatbot/components/ChatItem/index.tsx
View File

@@ -4,12 +4,12 @@ import Avatar from '@primitives/Avatar';
import { AvatarBlueStyles, IChatListItem, lightGreyscaleColor, MESSAGE_TYPE } from '../../types';
import Typography from '@primitives/Typography';
import ChatStatus from './ChatStatus';
import { getChatTimeDifference, getCustomerInitials } from '../../../../utils/whatsAppchatbotUtils';
import { getChatTimeDifference, getCustomerInitials } from '@cp/utils/whatsAppchatbotUtils';
import cx from 'classnames';
import { useSelector } from 'react-redux';
import { RootState } from '../../../../store';
import { RootState } from '@cp/src/store';
import { enrichCustomerSelfie } from '../../actions';
import { renderFormattedText } from './utils';
import MarkdownToHtml from '../ChatFormatter/MarkdownToHtml';
function ChatItem(props: {
chatItem: IChatListItem;
@@ -48,7 +48,14 @@ function ChatItem(props: {
});
}
}, []);
const content = messageType === MESSAGE_TYPE.TEXT ? messageContent : 'Media';
const content =
messageType === MESSAGE_TYPE.TEXT ? (
<MarkdownToHtml text={messageContent} breakLine={false} />
) : (
'Media'
);
return (
<div
onClick={() => {
@@ -78,7 +85,7 @@ function ChatItem(props: {
className={cx(styles.wrapTextElipsis, messageType !== MESSAGE_TYPE.TEXT && 'italic')}
variant="p4"
>
{renderFormattedText(content, true)}
{content}
</Typography>
</div>
<div className={styles.unreadNotificationContainer}>

68
src/pages/WhatsappChatbot/components/Reply/index.tsx
View File

@@ -1,4 +1,4 @@
import React, { useEffect, useState } from 'react';
import React, { useEffect, useState, useRef } from 'react';
import styles from './reply.module.scss';
import ReplyActions from '../ReplyActions';
import { ChatSender, ReplySendingStatus } from '../../types';
@@ -8,6 +8,11 @@ import { fetchCurrentDate } from 'src/pages/auth/AuthActions';
import { setReplySendingStatus } from '@cp/src/reducers/whatsappChatbotSlice';
import { KEYBOARD_KEYS, LINE_BREAK, TIME_24_HOURS } from '@cp/src/constants/Common.constants';
import { inputKeyGenerator } from '@cp/utils/whatsAppchatbotUtils';
import ChatReplyEditor from '../ChatFormatter/ChatReplyEditor';
import createEmojiPlugin from '@draft-js-plugins/emoji';
import { EditorState, convertFromRaw, ContentState, convertToRaw, Editor } from 'draft-js';
import parseMessage from '../ChatFormatter/DraftjsToStringParser';
import { WHATSAPPCHAT_EDITOR_TOOLBAR_OPTIONS } from '../../constants';
import TemplateReply from '../TemplateReply';
interface ReplyProps {
@@ -51,32 +56,71 @@ function Reply({ chatSender }: ReplyProps) {
}
}
};
const editorRef = React.useRef<Editor>(null);
const [editorState, setEditorState] = useState(() => {
return EditorState.createEmpty();
});
const prevContentStateRef = useRef(convertToRaw(editorState.getCurrentContent()));
const handleEditorChange = (newEditorState: EditorState): void => {
const newContentState = convertToRaw(newEditorState.getCurrentContent());
setEditorState(newEditorState);
if (JSON.stringify(prevContentStateRef.current) !== JSON.stringify(newContentState)) {
const parsedMessage = parseMessage(newContentState);
setChatMessageContent(parsedMessage);
prevContentStateRef.current = newContentState;
}
};
const emojiPlugin = createEmojiPlugin({
useNativeArt: true
});
const plugins = [emojiPlugin];
return lastUserMessageTimeStamp && lastUserMessageTimeStamp < time24HoursBehind ? (
<TemplateReply
editorState={editorState}
setEditorState={setEditorState}
onChange={handleEditorChange}
editorRef={editorRef}
chatSender={chatSender}
inputKey={inputKey}
onChange={handleChangeInputText}
prevContentStateRef={prevContentStateRef}
handleChangeInputText={handleChangeInputText}
onKeyDown={keyDownHandler}
chatMessageContent={chatMessageContent}
setChatMessageContent={setChatMessageContent}
/>
) : (
<div className={styles.replyContainer} key={inputKey}>
<textarea
id={inputKey}
autoFocus={true}
placeholder="Type your reply here..."
title="Type your reply here..."
className={styles.textArea}
onChange={handleChangeInputText}
onKeyDown={keyDownHandler}
value={chatMessageContent}
/>
<div className={'w-full'}>
<ChatReplyEditor
onKeyDown={keyDownHandler}
onReplyChange={handleChangeInputText}
setChatMessageContent={setChatMessageContent}
error={''}
showToolbar={false}
editorState={editorState}
prevContentStateRef={prevContentStateRef}
handleEditorChange={handleEditorChange}
editorRef={editorRef}
plugins={plugins}
chatSender={chatSender}
chatMessageContent={chatMessageContent}
/>
</div>
<ReplyActions
richUtilProps={{
toolBarOptions: WHATSAPPCHAT_EDITOR_TOOLBAR_OPTIONS
}}
editorState={editorState}
setEditorState={setEditorState}
onChange={handleEditorChange}
chatSender={chatSender}
chatMessageContent={chatMessageContent}
setChatMessageContent={setChatMessageContent}
editorRef={editorRef}
/>
</div>
);

29
src/pages/WhatsappChatbot/components/ReplyActions/index.tsx
View File

@@ -1,14 +1,29 @@
import React from 'react';
import WhatsappChatActions from '../WhatsappChatActions';
import { ChatSender } from '@cp/pages/WhatsappChatbot/types';
import { ChatSender, IPlaceholderData } from '@cp/pages/WhatsappChatbot/types';
import { EditorState } from 'draft-js';
import { RICH_TEXT_TOOLS } from '@cp/pages/WhatsappChatbot/constants';
import { Editor } from 'draft-js';
interface IRichUtilProps {
toolBarOptions?: Array<{
style: RICH_TEXT_TOOLS;
child: JSX.Element;
}>;
defaultRichStyle?: Array<RICH_TEXT_TOOLS>;
}
interface ReplyActionsProps {
chatMessageContent: string;
setChatMessageContent: React.Dispatch<React.SetStateAction<string>>;
chatSender: ChatSender;
editorState: EditorState;
onChange: (editorState: EditorState) => void;
richUtilProps: IRichUtilProps;
editorRef: React.RefObject<Editor>;
setEditorState: React.Dispatch<React.SetStateAction<EditorState>>;
isTemplateTriggered?: boolean;
templateId?: string;
placeholderData?: Object;
placeholderData?: IPlaceholderData;
isTemplateTriggerButtonDisabled?: boolean;
}
@@ -16,6 +31,11 @@ function ReplyActions({
chatMessageContent,
setChatMessageContent,
chatSender,
editorState,
onChange,
richUtilProps,
editorRef,
setEditorState,
isTemplateTriggered,
templateId,
placeholderData,
@@ -27,6 +47,11 @@ function ReplyActions({
chatMessageContent={chatMessageContent}
setChatMessageContent={setChatMessageContent}
chatSender={chatSender}
editorState={editorState}
onChange={onChange}
richUtilProps={richUtilProps}
editorRef={editorRef}
setEditorState={setEditorState}
templateId={templateId}
placeholderData={placeholderData}
isTemplateTriggerButtonDisabled={isTemplateTriggerButtonDisabled}

170
src/pages/WhatsappChatbot/components/RichTextEditor/RichTextEditor.module.scss Normal file
View File

@@ -0,0 +1,170 @@
:global {
.rich-text-error .public-DraftEditorPlaceholder-inner {
color: var(--navi-color-red-base);
font-size: 14px;
}
}
.editorWrapper {
position: relative;
padding-bottom: 4px;
}
.editorFocused {
}
.editorFocused[data-isError='true'] {
border-bottom: 1px solid var(--navi-color-red-base);
}
.editorError {
background: var(--navi-color-red-bg);
}
.richTextEditorToolBar {
width: fit-content;
height: fit-content;
display: flex;
gap: 8px;
border-radius: 4px;
background: var(--bg-primary);
}
.emojiIcon {
margin: 0;
padding: 2px;
box-sizing: border-box;
font-size: 1.5em;
color: #888;
background: var(--bg-primary);
border: none;
cursor: pointer;
}
.emojiPopover {
padding: 0 0.8em;
position: absolute;
z-index: var(--z-index-emoji-popover);
box-sizing: content-box;
background: var(--bg-primary);
border: 1px solid #e0e0e0;
box-shadow: 0 4px 30px 0 gainsboro;
}
.emojiSelectPopoverTitle {
margin: 0 0 0.3em;
padding-left: 0.5em;
height: 2.5em;
line-height: 2.5em;
font-weight: normal;
font-size: 1em;
color: #9e9e9e;
}
.emojiSelectPopoverGroups {
margin: 0 0 0.3em;
position: relative;
width: 21em;
height: 20em;
}
.emojiSelectPopoverGroup {
position: relative;
overflow: hidden;
width: 100%;
height: 100%;
padding-bottom: 16px;
> h3 {
margin: 0px;
padding: 8px;
font-weight: normal;
font-size: 1em;
color: #9e9e9e;
}
}
.emojiSelectPopoverGroupList {
margin: 0;
padding: 0;
display: flex;
list-style: none;
flex-wrap: wrap;
}
.emojiSelectPopoverGroupItem {
width: 2.5em;
height: 2.5em;
> button {
background-color: transparent;
border: none;
}
}
.emojiSelectPopoverToneSelect {
border: none;
background-color: none;
}
.emojiSelectPopoverNav {
margin: 0;
padding: 0 0.5em;
display: flex;
width: 20em;
list-style: none;
}
.emojiSelectPopoverNavItem {
padding: 0;
width: 100%;
height: 100%;
font-size: 1.2em;
color: #bdbdbd;
background: none;
border: none;
outline: none;
}
.emojiSelectPopoverNavEntry {
width: 2.5em;
height: 2.5em;
border: none;
font-size: 0.8em;
color: #bdbdbd;
background-color: transparent;
}
.emojiSelectPopoverNavEntryActive {
padding: 0;
width: 100%;
height: 100%;
font-size: 1em;
color: var(--emoji-poopupover-color);
background: none;
border: none;
outline: none;
}
.emojiSelectPopoverEntryIcon {
margin: 0;
padding: 0;
width: 2.5em;
height: 1.5em;
box-sizing: border-box;
line-height: 1.2em;
font-size: 1.5em;
color: #888;
background: var(--bg-primary);
border: 1px solid #ddd;
border-radius: 1.5em;
cursor: pointer;
background: var(--emoji-select-popover-entry-icon-color);
}
:global {
.e1eigyu0 span {
font-size: 1.5em;
}
.eyoq5wq span {
font-size: 1.5em;
}
.ejr02pv {
bottom: 52px;
}
div.DraftEditor-root {
height: 60px;
overflow-y: auto;
position: relative;
}
div.DraftEditor-editorContainer,
div.public-DraftEditor-content {
height: 100%;
}
}

134
src/pages/WhatsappChatbot/components/RichTextEditor/RichTextEditor.tsx Normal file
View File

@@ -0,0 +1,134 @@
import React, { KeyboardEvent, useEffect } from 'react';
import {
Editor,
RichUtils,
EditorState,
DraftModel,
KeyBindingUtil,
getDefaultKeyBinding
} from 'draft-js';
import cx from 'classnames';
import createEmojiPlugin from '@draft-js-plugins/emoji';
import '@draft-js-plugins/emoji/lib/plugin.css';
type DraftHandleValue = DraftModel.Constants.DraftHandleValue;
import styles from './RichTextEditor.module.scss';
import RichTextToolbar from './RichTextToolbar';
import { RichTextEditorType } from '@cp/pages/WhatsappChatbot/components/RichTextEditor/types';
interface CustomCommands {
'split-block': string;
'send-message': string;
}
const RichTextEditor: React.FC<RichTextEditorType> = props => {
const { hasCommandModifier } = KeyBindingUtil;
const {
richUtilProps,
editorState,
onChange,
error,
showToolbar = true,
toolBarStyles,
editorRef,
id,
handleSendMessage,
...editorProps
} = props;
const { toolBarOptions = [] } = richUtilProps;
const handleEditorChange = (newEditorState: EditorState): void => {
onChange(newEditorState);
};
const handleToolbarClick = (e: React.MouseEvent<HTMLButtonElement>, style: string): void => {
e?.preventDefault();
handleEditorChange(RichUtils.toggleInlineStyle(editorState, style));
editorRef?.current?.focus();
};
const handleKeyCommand = (
command: keyof CustomCommands,
editorState: EditorState
): DraftHandleValue => {
let newState: EditorState | null = editorState;
if (command === 'send-message') {
//send message
handleSendMessage && handleSendMessage();
onChange(EditorState.createEmpty());
}
if (command === 'split-block') {
newState = RichUtils.insertSoftNewline(editorState);
} else {
newState = RichUtils.handleKeyCommand(editorState, command);
}
if (newState) {
onChange(newState);
return 'handled';
}
return 'not-handled';
};
const isFocused = editorState?.getSelection()?.getHasFocus();
useEffect(() => {
onChange(EditorState.createEmpty());
}, [id]);
const emojiPlugin = createEmojiPlugin({
useNativeArt: true
});
emojiPlugin.initialize({
getEditorState: () => editorState,
setEditorState: (editorState: EditorState) => onChange(editorState)
});
const handleKeyBindingFunction = (e: KeyboardEvent): string | null => {
if (e.keyCode === 13 && hasCommandModifier(e)) {
return 'split-block';
}
if (e.keyCode === 13) {
return 'send-message';
}
return getDefaultKeyBinding(e);
};
return (
<div
data-isError={!!error}
className={cx(styles.editorWrapper, {
[styles.editorFocused]: isFocused,
[styles.editorError]: error,
'rich-text-error': error
})}
>
<Editor
ref={editorRef}
handleKeyCommand={handleKeyCommand}
keyBindingFn={handleKeyBindingFunction}
editorState={editorState}
onChange={handleEditorChange}
stripPastedStyles
plugins={props.plugins}
{...editorProps}
/>
{showToolbar ? (
<RichTextToolbar
options={toolBarOptions}
onToolbarClick={handleToolbarClick}
editorState={editorState}
onChange={onChange}
toolBarStyles={toolBarStyles}
/>
) : null}
</div>
);
};
export default RichTextEditor;

118
src/pages/WhatsappChatbot/components/RichTextEditor/RichTextToolbar.tsx Normal file
View File

@@ -0,0 +1,118 @@
import React, { useRef } from 'react';
import cx from 'classnames';
import { EditorState } from 'draft-js';
import 'draft-js/dist/Draft.css';
import styles from './RichTextEditor.module.scss';
import { RICH_TEXT_TOOLS } from '../../constants';
import createEmojiPlugin from '@draft-js-plugins/emoji';
import '@draft-js-plugins/emoji/lib/plugin.css';
import { Tooltip, TooltipContent, TooltipTrigger } from '@cp/src/components/TooltipV2/TooltipV2';
import { isMac } from '@cp/src/utils/commonUtils';
import EmojiIcon from '@cp/src/assets/icons/whatsAppChatbot/EmojiIcon'; // Import the EmojiIcon component
import { Button } from '@navi/web-ui/lib/primitives';
interface RichTextToolbarProps {
options: Array<{
style: RICH_TEXT_TOOLS;
child: JSX.Element;
}>;
onToolbarClick: (e: React.MouseEvent<HTMLButtonElement>, style: string) => void;
editorState: EditorState;
onChange: (editorState: EditorState) => void;
toolBarStyles?: string;
}
const RichTextToolbar: React.FC<RichTextToolbarProps> = ({
onToolbarClick,
editorState,
options,
onChange,
toolBarStyles = 'absolute top-[-24px] right-[0px]'
}) => {
const theme = {
emojiSelectButton: styles.emojiIcon,
emojiSelectPopover: styles.emojiPopover,
emojiSelectPopoverTitle: styles.emojiSelectPopoverTitle,
emojiSelectPopoverGroups: styles.emojiSelectPopoverGroups,
emojiSelectPopoverGroup: styles.emojiSelectPopoverGroup,
emojiSelectPopoverGroupList: styles.emojiSelectPopoverGroupList,
emojiSelectPopoverGroupItem: styles.emojiSelectPopoverGroupItem,
emojiSelectPopoverToneSelect: styles.emojiSelectPopoverToneSelect,
emojiSelectPopoverNav: styles.emojiSelectPopoverNav,
emojiSelectPopoverNavItem: styles.emojiSelectPopoverNavItem,
emojiSelectPopoverNavEntry: styles.emojiSelectPopoverNavEntry,
emojiSelectPopoverNavEntryActive: styles.emojiSelectPopoverNavEntryActive,
emojiSelectPopoverEntryIcon: styles.emojiSelectPopoverEntryIcon
};
const emojiPlugin = createEmojiPlugin({
useNativeArt: true,
selectButtonContent: (
<Tooltip mainAxisOffset={9}>
<TooltipContent className="tooltipWrapper">Emoji</TooltipContent>
<TooltipTrigger>
<EmojiIcon />
</TooltipTrigger>
</Tooltip>
)
});
emojiPlugin.initialize({
getEditorState: () => editorState,
setEditorState: (editorState: EditorState) => onChange(editorState)
});
const { EmojiSelect } = emojiPlugin;
const boldButtonRef = useRef<HTMLButtonElement | null>(null);
const italicButtonRef = useRef<HTMLButtonElement | null>(null);
const isBoldActive = editorState.getCurrentInlineStyle().has('BOLD');
const isItalicActive = editorState.getCurrentInlineStyle().has('ITALIC');
return (
<div className={cx(styles.richTextEditorToolBar, toolBarStyles)}>
<div className="flex justify-center pt-[2px]">
<EmojiSelect closeOnEmojiSelect />
</div>
{options.map(({ style, child }, index) => (
<Tooltip key={index}>
<TooltipContent className="tooltipWrapper">
{style === 'BOLD' ? (
<>
<div className="flex justify-center pb-[4px]">Bold</div>
{isMac ? 'Cmd + B' : 'Ctrl + B'}
</>
) : (
<>
<div className="flex justify-center pb-[4px]">Italics</div>
{isMac ? 'Cmd + I' : 'Ctrl + I'}
</>
)}
</TooltipContent>
<TooltipTrigger>
<Button
className={cx(
'pt-2 px-1 border-none bg-[#fff] cursor-pointer hover:!bg-[#f1f1f1] shadow-none',
{
'!bg-[#E6F1FF]':
(style === 'BOLD' && isBoldActive) || (style === 'ITALIC' && isItalicActive)
}
)}
type={'button'}
key={style}
data-style={style}
ref={style === 'BOLD' ? boldButtonRef : style === 'ITALIC' ? italicButtonRef : null}
onMouseDown={e => onToolbarClick(e, style)}
>
{child}
</Button>
</TooltipTrigger>
</Tooltip>
))}
</div>
);
};
export default RichTextToolbar;

21
src/pages/WhatsappChatbot/components/RichTextEditor/types.ts Normal file
View File

@@ -0,0 +1,21 @@
import { RICH_TEXT_TOOLS } from '@cp/pages/WhatsappChatbot/constants';
import React from 'react';
import Draft, { DraftComponent, Editor } from 'draft-js';
type DraftEditorProps = DraftComponent.Base.DraftEditorProps;
export interface RichTextEditorType extends DraftEditorProps {
richUtilProps: {
toolBarOptions?: Array<{
style: RICH_TEXT_TOOLS;
child: JSX.Element;
}>;
defaultRichStyle?: Array<RICH_TEXT_TOOLS>;
};
showToolbar?: boolean;
error?: string;
plugins?: PluginArray;
toolBarStyles?: string;
editorRef: React.RefObject<Editor>;
id?: string;
handleSendMessage?: () => void;
}

11
src/pages/WhatsappChatbot/components/TemplateReply/index.module.scss
View File

@@ -13,6 +13,7 @@
.disabledReplyContainer {
padding-top: 16px;
padding-left: 16px;
.headerText {
padding-left: 20px;
@@ -22,12 +23,18 @@
.bodyTextContainer {
width: 100%;
padding: 5px;
padding: 8px 12px;
border-radius: 8px;
height: 58px;
height: 58px !important;
border: 1px solid var(--navi-color-gray-border);
box-sizing: border-box;
resize: vertical;
overflow: auto;
&:focus-within {
outline: var(--navi-textarea-active-outline);
box-shadow: var(--navi-shadow-focused-blue);
}
.bodyText {
border-radius: 0;

60
src/pages/WhatsappChatbot/components/TemplateReply/index.tsx
View File

@@ -8,19 +8,39 @@ import { useEffect } from 'react';
import { getTemplateDetails } from '../../actions';
import { extractTemplateDetails, replaceVariable } from '../ChatItem/utils';
import { formatOutputString } from '../ChatItem/utils';
import { WHATSAPPCHAT_EDITOR_TOOLBAR_OPTIONS } from '../../constants';
import { EditorState, Editor } from 'draft-js';
import ChatReplyEditor from '../ChatFormatter/ChatReplyEditor';
import cx from 'classnames';
interface TemplateReplyProps {
chatSender: ChatSender;
inputKey: string;
onChange: (e: React.ChangeEvent<HTMLTextAreaElement>) => void;
onKeyDown: (e: React.KeyboardEvent<HTMLTextAreaElement>) => void;
chatMessageContent: string;
setChatMessageContent: React.Dispatch<React.SetStateAction<string>>;
editorState: EditorState;
onChange: (editorState: EditorState) => void;
editorRef: React.RefObject<Editor>;
setEditorState: React.Dispatch<React.SetStateAction<EditorState>>;
handleChangeInputText: (event: React.ChangeEvent<HTMLTextAreaElement>) => void;
prevContentStateRef: React.MutableRefObject<Draft.RawDraftContentState>;
}
const TemplateReply = (props: TemplateReplyProps) => {
const { chatSender, inputKey, onChange, onKeyDown, chatMessageContent, setChatMessageContent } =
props;
const {
chatSender,
inputKey,
onChange,
onKeyDown,
chatMessageContent,
setChatMessageContent,
editorState,
editorRef,
setEditorState,
handleChangeInputText,
prevContentStateRef
} = props;
const agentReferenceId = useSelector((state: RootState) => state?.common?.userData?.referenceId);
const templateTriggeredDetails = useSelector(
@@ -52,16 +72,27 @@ const TemplateReply = (props: TemplateReplyProps) => {
{leadingText || ''}
</Typography>
</div>
<div className="w-full mr-4">
<TextArea
<div className={cx('w-full mr-4', styles.bodyTextContainer)}>
<ChatReplyEditor
id={inputKey}
placeholder="Enter your text here..."
title="Enter your text here..."
containerClassName={styles.bodyTextContainer}
className={styles.bodyText}
onChange={onChange}
onKeyDown={onKeyDown}
value={chatMessageContent}
placeholder="Enter your text here..."
onReplyChange={handleChangeInputText}
setChatMessageContent={setChatMessageContent}
chatMessageContent={chatMessageContent}
chatSender={chatSender}
error={''}
showToolbar={false}
editorState={editorState}
prevContentStateRef={prevContentStateRef}
handleEditorChange={onChange}
editorRef={editorRef}
templateId={templateId}
isTemplateTriggerButtonDisabled={!chatMessageContent.trim()}
isTemplateTriggered={true}
placeholderData={{
[variableName]: formatOutputString(chatMessageContent)
}}
/>
</div>
</div>
@@ -72,6 +103,13 @@ const TemplateReply = (props: TemplateReplyProps) => {
</div>
<div className={styles.TemplateReply}>
<ReplyActions
richUtilProps={{
toolBarOptions: WHATSAPPCHAT_EDITOR_TOOLBAR_OPTIONS
}}
editorRef={editorRef}
editorState={editorState}
setEditorState={setEditorState}
onChange={onChange}
isTemplateTriggered={true}
chatSender={chatSender}
chatMessageContent={replaceVariable(templateMessage, variableName, chatMessageContent)}

46
src/pages/WhatsappChatbot/components/WhatsappChatActions/index.tsx
View File

@@ -1,4 +1,4 @@
import React, { useEffect } from 'react';
import React, { useEffect, RefObject } from 'react';
import { Button } from '@primitives';
import styles from './whatsappActions.module.scss';
import SendIcon from '../../../../assets/icons/SendIcon';
@@ -8,11 +8,21 @@ import { fetchCurrentDate } from 'src/pages/auth/AuthActions';
import { sendChatMessage } from '../../actions';
import { ChatSender, IPlaceholderData, MessageType, ReplySendingStatus } from '../../types';
import { setReplySendingStatus } from '@cp/src/reducers/whatsappChatbotSlice';
import cx from 'classnames';
import { RichUtils, EditorState } from 'draft-js';
import RichTextToolbar from '../RichTextEditor/RichTextToolbar';
import { RICH_TEXT_TOOLS } from '../../constants';
import { Editor } from 'draft-js';
function WhatsappChatActions({
chatMessageContent,
setChatMessageContent,
chatSender,
editorState,
onChange,
richUtilProps,
editorRef,
setEditorState,
isTemplateTriggered = false,
templateId,
placeholderData,
@@ -25,7 +35,19 @@ function WhatsappChatActions({
templateId?: string;
placeholderData?: IPlaceholderData;
isTemplateTriggerButtonDisabled: boolean;
editorState: EditorState;
onChange: (editorState: EditorState) => void;
richUtilProps: {
toolBarOptions?: Array<{
style: RICH_TEXT_TOOLS;
child: JSX.Element;
}>;
defaultRichStyle?: Array<RICH_TEXT_TOOLS>;
};
editorRef: React.RefObject<Editor>;
setEditorState: React.Dispatch<React.SetStateAction<EditorState>>;
}) {
const { toolBarOptions = [] } = richUtilProps;
const { aggentRefId, serverDate, currentChat, replySendingStatus } = useSelector(
(state: RootState) => ({
aggentRefId: state?.common?.userData?.referenceId,
@@ -45,6 +67,17 @@ function WhatsappChatActions({
const sendButtonClicked = () => {
if (sendButtonDisabled) return;
dispatch(setReplySendingStatus(ReplySendingStatus.SENDING));
setEditorState(EditorState.createEmpty());
};
const handleEditorChange = (newEditorState: EditorState): void => {
onChange(newEditorState);
};
const handleToolbarClick = (e: React.MouseEvent<HTMLButtonElement>, style: string): void => {
e?.preventDefault();
handleEditorChange(RichUtils.toggleInlineStyle(editorState, style));
editorRef?.current?.focus();
};
useEffect(() => {
@@ -70,7 +103,16 @@ function WhatsappChatActions({
}, [replySendingStatus]);
return (
<div className={styles.container}>
<div className={cx(styles.container, 'items-center')}>
<div>
<RichTextToolbar
options={toolBarOptions}
onToolbarClick={handleToolbarClick}
editorState={editorState}
onChange={onChange}
toolBarStyles={styles.richTextToolbar}
/>
</div>
<Button
startAdornment={<SendIcon width={20} height={20} />}
variant={'secondary'}

7
src/pages/WhatsappChatbot/components/WhatsappChatActions/whatsappActions.module.scss
View File

@@ -1,6 +1,7 @@
.container {
display: flex;
justify-content: flex-end;
justify-content: space-between;
padding-top: 10px;
padding-right: 16px;
}
@@ -8,3 +9,7 @@
border-color: var(--blue-base);
color: var(--blue-base);
}
.richTextToolbar {
top: auto;
right: auto;
}

4
src/pages/WhatsappChatbot/components/WhatsappChatContainer/components/TextMessage/index.tsx
View File

@@ -12,7 +12,7 @@ import TeleAgentAvatarIcon from 'src/assets/icons/whatsAppChatbot/TeleAgentAvata
import HrcAvatarIcon from 'src/assets/icons/whatsAppChatbot/HrcAvatarIcon';
import SelfAgentAvatarIcon from 'src/assets/icons/whatsAppChatbot/SelfAgentAvatarIcon';
import { renderFormattedText } from '../../../ChatItem/utils';
import MarkdownToHtml from '@cp/src/pages/WhatsappChatbot/components/ChatFormatter/MarkdownToHtml';
export interface TextMessageProps {
content: string;
sender: ChatSender;
@@ -72,7 +72,7 @@ function TextMessage({
<div className={styles.messageBox}>
<div className={styles.message}>
<Typography variant="p2" className={cx(styles.msgText, styles.messageTextWrap)}>
{renderFormattedText(content, false)}
<MarkdownToHtml text={content} breakLine={true} />
</Typography>
</div>
<DateTimeStatus

21
src/pages/WhatsappChatbot/constants.tsx Normal file
View File

@@ -0,0 +1,21 @@
import boldIcon from '@cp/src/assets/icons/whatsAppChatbot/BoldIcon.svg';
import italicIcon from '@cp/src/assets/icons/whatsAppChatbot/ItalicIcon.svg';
import { DraftModel } from 'draft-js';
export type RawContentState = DraftModel.Encoding.RawDraftContentState;
export type QnaKey = 'question' | 'answer';
export enum RICH_TEXT_TOOLS {
BOLD = 'BOLD',
ITALIC = 'ITALIC'
}
export const WHATSAPPCHAT_EDITOR_TOOLBAR_OPTIONS = [
{
style: RICH_TEXT_TOOLS.BOLD,
child: <img src={boldIcon} alt={RICH_TEXT_TOOLS.BOLD} />
},
{
style: RICH_TEXT_TOOLS.ITALIC,
child: <img src={italicIcon} alt={RICH_TEXT_TOOLS.ITALIC} />
}
];

224
yarn.lock
View File

@@ -561,6 +561,38 @@
resolved "https://nexus.cmd.navi-tech.in/repository/navi-commons/@cush/relative/-/relative-1.0.0.tgz"
integrity sha512-RpfLEtTlyIxeNPGKcokS+p3BZII/Q3bYxryFRglh5H3A3T8q9fsLYm72VYAMEOOIBLEa8o93kFLiBDUWKrwXZA==
"@draft-js-plugins/buttons@^4.0.0":
version "4.3.3"
resolved "https://registry.yarnpkg.com/@draft-js-plugins/buttons/-/buttons-4.3.3.tgz#1884faa80915c297f9523f3f50f333ceb4441120"
integrity sha512-XGQBiRXYLGAO6uBrajpg1Tl42FD7o12oT9bM+ikciPMXdHOyJ6y8cJhY4YZI4AYhY37MNf6bdh9/p81TtIpcHA==
dependencies:
clsx "^1.2.1"
"@draft-js-plugins/emoji@4.0.0":
version "4.0.0"
resolved "https://registry.yarnpkg.com/@draft-js-plugins/emoji/-/emoji-4.0.0.tgz#2db77db8450688f9b2956704dee470485c21b1dd"
integrity sha512-m/N0B4OKEKjqKmhBHGfX8h2tAL8WuP3O5TC6+jvT5qD5wgcIPC0zEpmdf2hYSir5ejEt57JwzM80hqXY9dTAdw==
dependencies:
"@draft-js-plugins/buttons" "^4.0.0"
"@draft-js-plugins/utils" "^4.0.0"
clsx "^1.0.4"
emoji-toolkit "^6.0.1"
emojibase "^5.0.0"
emojibase-data "^6.0.0"
find-with-regex "^1.1.3"
immutable "~3.8.2"
lodash "^4.17.19"
lodash-es "^4.17.20"
prop-types "^15.5.8"
react-custom-scrollbars "^4.2.0"
react-icons "^4.1.0"
to-style "^1.3.3"
"@draft-js-plugins/utils@^4.0.0":
version "4.2.1"
resolved "https://registry.yarnpkg.com/@draft-js-plugins/utils/-/utils-4.2.1.tgz#b3318762b6ba5924581e9432e8990a30e0edb85a"
integrity sha512-FtGtBM+zSPgwaaAujULi0eCixlOBsqRezhOcZvBi3y0A/LkvNtKhykEOzd9/96qnGVT54iMiOJb+hw62yk/CCw==
"@elastic/apm-rum-core@^5.17.0":
version "5.17.0"
resolved "https://nexus.cmd.navi-tech.in/repository/navi-commons/@elastic/apm-rum-core/-/apm-rum-core-5.17.0.tgz"
@@ -1846,6 +1878,14 @@
resolved "https://registry.npmjs.org/@types/d3-timer/-/d3-timer-3.0.0.tgz"
integrity sha512-HNB/9GHqu7Fo8AQiugyJbv6ZxYz58wef0esl4Mv828w1ZKpAshw/uFWVDUcIB9KKFeFKoxS3cHY07FFgtTRZ1g==
"@types/draft-js@^0.11.18":
version "0.11.18"
resolved "https://registry.yarnpkg.com/@types/draft-js/-/draft-js-0.11.18.tgz#f2cad2178987fdd444827a2f7809a653f82a70ad"
integrity sha512-lP6yJ+EKv5tcG1dflWgDKeezdwBa8wJ7KkiNrrHqXuXhl/VGes1SKjEfKHDZqOz19KQbrAhFvNhDPWwnQXYZGQ==
dependencies:
"@types/react" "*"
immutable "~3.7.4"
"@types/enzyme@^3.10.11":
version "3.10.12"
resolved "https://nexus.cmd.navi-tech.in/repository/navi-commons/@types/enzyme/-/enzyme-3.10.12.tgz"
@@ -2232,6 +2272,11 @@ acorn@^8.2.4, acorn@^8.5.0, acorn@^8.8.0:
resolved "https://nexus.cmd.navi-tech.in/repository/navi-commons/acorn/-/acorn-8.8.2.tgz"
integrity sha512-xjIYgE8HBrkpd/sJqOGNspf8uHG+NOHGOw6a/Urj8taM2EXfdNAH2oFcPeIFfsv3+kz/mJrS5VuMqbNLjCa2vw==
add-px-to-style@1.0.0:
version "1.0.0"
resolved "https://registry.yarnpkg.com/add-px-to-style/-/add-px-to-style-1.0.0.tgz#d0c135441fa8014a8137904531096f67f28f263a"
integrity sha512-YMyxSlXpPjD8uWekCQGuN40lV4bnZagUwqa2m/uFv1z/tNImSk9fnXVMUI5qwME/zzI3MMQRvjZ+69zyfSSyew==
ag-grid-community@^28.1.1:
version "28.2.1"
resolved "https://nexus.cmd.navi-tech.in/repository/navi-commons/ag-grid-community/-/ag-grid-community-28.2.1.tgz"
@@ -3089,6 +3134,11 @@ clone@^1.0.2:
resolved "https://registry.yarnpkg.com/clone/-/clone-1.0.4.tgz#da309cc263df15994c688ca902179ca3c7cd7c7e"
integrity sha512-JQHZ2QMW6l3aH/j6xCqQThY/9OH4D/9ls34cgkUBiEeocRTU04tHfKPBsUK1PqZCUQM7GiA0IIXJSuXHI64Kbg==
clsx@^1.0.4, clsx@^1.2.1:
version "1.2.1"
resolved "https://registry.yarnpkg.com/clsx/-/clsx-1.2.1.tgz#0ddc4a20a549b59c93a4116bb26f5294ca17dc12"
integrity sha512-EcR6r5a8bj6pu3ycsa/E/cKVGuTgZJZdsyUYHOksG/UHIiKfjxzRxYJpyVBwYaQeOvghal9fcc4PidlgzugAQg==
co@^4.6.0:
version "4.6.0"
resolved "https://nexus.cmd.navi-tech.in/repository/navi-commons/co/-/co-4.6.0.tgz"
@@ -3264,6 +3314,11 @@ core-js@^2.4.0:
resolved "https://registry.yarnpkg.com/core-js/-/core-js-2.6.12.tgz#d9333dfa7b065e347cc5682219d6f690859cc2ec"
integrity sha512-Kb2wC0fvsWfQrgk8HU5lW6U/Lcs8+9aaYcy4ZFc6DDlo4nZ7n70dEgE5rtR0oG6ufKDUnrwfWL1mXR5ljDatrQ==
core-js@^3.6.4:
version "3.37.1"
resolved "https://registry.yarnpkg.com/core-js/-/core-js-3.37.1.tgz#d21751ddb756518ac5a00e4d66499df981a62db9"
integrity sha512-Xn6qmxrQZyB0FFY8E3bgRXei3lWDJHhvI+u0q9TKIYM49G8pAr0FgnnrFRAmsbptZL1yxRADVXn+x5AGsbBfyw==
core-util-is@~1.0.0:
version "1.0.3"
resolved "https://nexus.cmd.navi-tech.in/repository/navi-commons/core-util-is/-/core-util-is-1.0.3.tgz"
@@ -3285,6 +3340,13 @@ create-react-class@^15.6.0:
loose-envify "^1.3.1"
object-assign "^4.1.1"
cross-fetch@^3.0.4:
version "3.1.8"
resolved "https://registry.yarnpkg.com/cross-fetch/-/cross-fetch-3.1.8.tgz#0327eba65fd68a7d119f8fb2bf9334a1a7956f82"
integrity sha512-cvA+JwZoU0Xq+h6WkMvAUqPEYy92Obet6UdKLfW60qn99ftItKjB5T+BkyWOFWe2pUyfQ+IJHmpOTznqk1M6Kg==
dependencies:
node-fetch "^2.6.12"
cross-spawn@^7.0.2, cross-spawn@^7.0.3:
version "7.0.3"
resolved "https://nexus.cmd.navi-tech.in/repository/navi-commons/cross-spawn/-/cross-spawn-7.0.3.tgz"
@@ -3634,6 +3696,15 @@ doctrine@^3.0.0:
dependencies:
esutils "^2.0.2"
dom-css@^2.0.0:
version "2.1.0"
resolved "https://registry.yarnpkg.com/dom-css/-/dom-css-2.1.0.tgz#fdbc2d5a015d0a3e1872e11472bbd0e7b9e6a202"
integrity sha512-w9kU7FAbaSh3QKijL6n59ofAhkkmMJ31GclJIz/vyQdjogfyxcB6Zf8CZyibOERI5o0Hxz30VmJS7+7r5fEj2Q==
dependencies:
add-px-to-style "1.0.0"
prefix-style "2.0.1"
to-camel-case "1.0.0"
dom-helpers@^3.4.0:
version "3.4.0"
resolved "https://registry.npmjs.org/dom-helpers/-/dom-helpers-3.4.0.tgz"
@@ -3734,6 +3805,43 @@ dotenv@^16.0.0:
resolved "https://registry.npmjs.org/dotenv/-/dotenv-16.3.1.tgz"
integrity sha512-IPzF4w4/Rd94bA9imS68tZBaYyBWSCE47V1RGuMrB94iyTOIEwRmVL2x/4An+6mETpLrKJ5hQkB8W4kFAadeIQ==
draft-js-export-markdown@^1.4.0:
version "1.4.0"
resolved "https://registry.yarnpkg.com/draft-js-export-markdown/-/draft-js-export-markdown-1.4.0.tgz#783731a0aaba4a5962d1d6a37293df7926ea6e45"
integrity sha512-blfAvlhGhjVlHNaZ5WJKlrXhcftnwwC5VC+Eu3ztOGpGLaOom4hxhBjbKEWjvbQZJ9zL+xo57ukm39prYZMG5Q==
dependencies:
draft-js-utils "^1.4.0"
draft-js-import-element@^1.4.0:
version "1.4.0"
resolved "https://registry.yarnpkg.com/draft-js-import-element/-/draft-js-import-element-1.4.0.tgz#8760acbfeb60ed824a1c8319ec049f702681df66"
integrity sha512-WmYT5PrCm47lGL5FkH6sRO3TTAcn7qNHsD3igiPqLG/RXrqyKrqN4+wBgbcT2lhna/yfWTRtgzAbQsSJoS1Meg==
dependencies:
draft-js-utils "^1.4.0"
synthetic-dom "^1.4.0"
draft-js-import-markdown@^1.4.1:
version "1.4.1"
resolved "https://registry.yarnpkg.com/draft-js-import-markdown/-/draft-js-import-markdown-1.4.1.tgz#fbd4c15fbf81a119d2d40c028e5195e4f01cc804"
integrity sha512-58mDXJURrb5dsiN+cIms/gojI9jngE60WAwygYoxrEbsQeIIITOlFLjV/m/7Ko7HVpc5wjngVV2hzJ71T3FpMA==
dependencies:
draft-js-import-element "^1.4.0"
synthetic-dom "^1.4.0"
draft-js-utils@^1.4.0:
version "1.4.1"
resolved "https://registry.yarnpkg.com/draft-js-utils/-/draft-js-utils-1.4.1.tgz#a59c792ad621f7050292031a237d524708a6d509"
integrity sha512-xE81Y+z/muC5D5z9qWmKfxEW1XyXfsBzSbSBk2JRsoD0yzMGGHQm/0MtuqHl/EUDkaBJJLjJ2EACycoDMY/OOg==
draft-js@^0.11.7:
version "0.11.7"
resolved "https://registry.yarnpkg.com/draft-js/-/draft-js-0.11.7.tgz#be293aaa255c46d8a6647f3860aa4c178484a206"
integrity sha512-ne7yFfN4sEL82QPQEn80xnADR8/Q6ALVworbC5UOSzOvjffmYfFsr3xSZtxbIirti14R7Y33EZC5rivpLgIbsg==
dependencies:
fbjs "^2.0.0"
immutable "~3.7.4"
object-assign "^4.1.1"
draht@1.0.1:
version "1.0.1"
resolved "https://registry.yarnpkg.com/draht/-/draht-1.0.1.tgz#c4c8879923d2130dfa9c5930e956c85d62b1e975"
@@ -3795,6 +3903,21 @@ emoji-regex@^9.2.2:
resolved "https://nexus.cmd.navi-tech.in/repository/navi-commons/emoji-regex/-/emoji-regex-9.2.2.tgz"
integrity sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==
emoji-toolkit@^6.0.1:
version "6.6.0"
resolved "https://registry.yarnpkg.com/emoji-toolkit/-/emoji-toolkit-6.6.0.tgz#e7287c43a96f940ec4c5428cd7100a40e57518f1"
integrity sha512-pEu0kow2p1N8zCKnn/L6H0F3rWUBB3P3hVjr/O5yl1fK7N9jU4vO4G7EFapC5Y3XwZLUCY0FZbOPyTkH+4V2eQ==
emojibase-data@^6.0.0:
version "6.2.0"
resolved "https://registry.yarnpkg.com/emojibase-data/-/emojibase-data-6.2.0.tgz#db6c75c36905284fa623f4aa5f468d2be6ed364a"
integrity sha512-SWKaXD2QeQs06IE7qfJftsI5924Dqzp+V9xaa5RzZIEWhmlrG6Jt2iKwfgOPHu+5S8MEtOI7GdpKsXj46chXOw==
emojibase@^5.0.0:
version "5.2.0"
resolved "https://registry.yarnpkg.com/emojibase/-/emojibase-5.2.0.tgz#3b53899f9a9f8aae1280db446c83ce28f1d286d5"
integrity sha512-5T02oTJaWpScAtYbukKVc8vQ1367MyfVtFHUMoOVZ9/r1kFcbYqjSktD56TICBAeyW9uc1t+7qQuXEtntM6p5A==
encodeurl@~1.0.2:
version "1.0.2"
resolved "https://registry.yarnpkg.com/encodeurl/-/encodeurl-1.0.2.tgz#ad3ff4c86ec2d029322f5a02c3a9a606c95b3f59"
@@ -4452,6 +4575,11 @@ fb-watchman@^2.0.0:
dependencies:
bser "2.1.1"
fbjs-css-vars@^1.0.0:
version "1.0.2"
resolved "https://registry.yarnpkg.com/fbjs-css-vars/-/fbjs-css-vars-1.0.2.tgz#216551136ae02fe255932c3ec8775f18e2c078b8"
integrity sha512-b2XGFAFdWZWg0phtAWLHCk836A1Xann+I+Dgd3Gk64MHKZO44FfoD1KxyvbSh0qZsIoXQGGlVztIY+oitJPpRQ==
fbjs@^0.8.9:
version "0.8.18"
resolved "https://registry.npmjs.org/fbjs/-/fbjs-0.8.18.tgz"
@@ -4465,6 +4593,20 @@ fbjs@^0.8.9:
setimmediate "^1.0.5"
ua-parser-js "^0.7.30"
fbjs@^2.0.0:
version "2.0.0"
resolved "https://registry.yarnpkg.com/fbjs/-/fbjs-2.0.0.tgz#01fb812138d7e31831ed3e374afe27b9169ef442"
integrity sha512-8XA8ny9ifxrAWlyhAbexXcs3rRMtxWcs3M0lctLfB49jRDHiaxj+Mo0XxbwE7nKZYzgCFoq64FS+WFd4IycPPQ==
dependencies:
core-js "^3.6.4"
cross-fetch "^3.0.4"
fbjs-css-vars "^1.0.0"
loose-envify "^1.0.0"
object-assign "^4.1.0"
promise "^7.1.1"
setimmediate "^1.0.5"
ua-parser-js "^0.7.18"
figures@^3.0.0:
version "3.2.0"
resolved "https://registry.yarnpkg.com/figures/-/figures-3.2.0.tgz#625c18bd293c604dc4a8ddb2febf0c88341746af"
@@ -4527,6 +4669,11 @@ find-up@^5.0.0:
locate-path "^6.0.0"
path-exists "^4.0.0"
find-with-regex@^1.1.3:
version "1.1.3"
resolved "https://registry.yarnpkg.com/find-with-regex/-/find-with-regex-1.1.3.tgz#d6c6f2debee898d36b6a77e05709b13dd5dc8a26"
integrity sha512-zkEVQ1H3PIQL/19ADKt1lCQU4QGM3OneiderUcFgn5EgTm/TnoUh7HxPAwP8w/vXxWSLC6KtpbDQpypJ5+majw==
firebase@^8.8.0:
version "8.10.1"
resolved "https://registry.npmjs.org/firebase/-/firebase-8.10.1.tgz"
@@ -5196,6 +5343,16 @@ immutable@^4.0.0:
resolved "https://nexus.cmd.navi-tech.in/repository/navi-commons/immutable/-/immutable-4.3.0.tgz"
integrity sha512-0AOCmOip+xgJwEVTQj1EfiDDOkPmuyllDuTuEX+DDXUgapLAsBIfkg3sxCYyCEA8mQqZrrxPUGjcOQ2JS3WLkg==
immutable@~3.7.4:
version "3.7.6"
resolved "https://registry.yarnpkg.com/immutable/-/immutable-3.7.6.tgz#13b4d3cb12befa15482a26fe1b2ebae640071e4b"
integrity sha512-AizQPcaofEtO11RZhPPHBOJRdo/20MKQF9mBLnVkBoyHi1/zXK8fzVdnEpSV9gxqtnh6Qomfp3F0xT5qP/vThw==
immutable@~3.8.2:
version "3.8.2"
resolved "https://registry.yarnpkg.com/immutable/-/immutable-3.8.2.tgz#c2439951455bb39913daf281376f1530e104adf3"
integrity sha512-15gZoQ38eYjEjxkorfbcgBKBL6R7T459OuK+CpcWt7O3KF4uPCx2tD0uFETlUDIyo+1789crbMhTvQBSR5yBMg==
import-fresh@^3.0.0, import-fresh@^3.2.1:
version "3.3.0"
resolved "https://nexus.cmd.navi-tech.in/repository/navi-commons/import-fresh/-/import-fresh-3.3.0.tgz"
@@ -6285,6 +6442,11 @@ locate-path@^6.0.0:
dependencies:
p-locate "^5.0.0"
lodash-es@^4.17.20:
version "4.17.21"
resolved "https://registry.yarnpkg.com/lodash-es/-/lodash-es-4.17.21.tgz#43e626c46e6591b7750beb2b50117390c609e3ee"
integrity sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw==
lodash.camelcase@^4.3.0:
version "4.3.0"
resolved "https://registry.npmjs.org/lodash.camelcase/-/lodash.camelcase-4.3.0.tgz"
@@ -6854,6 +7016,13 @@ node-fetch@^1.0.1:
encoding "^0.1.11"
is-stream "^1.0.1"
node-fetch@^2.6.12:
version "2.7.0"
resolved "https://registry.yarnpkg.com/node-fetch/-/node-fetch-2.7.0.tgz#d0f0fa6e3e2dc1d27efcd8ad99d550bda94d187d"
integrity sha512-c4FRfUm/dbcWZ7U+1Wq0AwCyFL+3nt2bEw05wfxSz+DWpWsitgmSgYmy2dQdWyKC1694ELPqMs/YzUSNozLt8A==
dependencies:
whatwg-url "^5.0.0"
node-fetch@^2.6.7:
version "2.6.11"
resolved "https://registry.npmjs.org/node-fetch/-/node-fetch-2.6.11.tgz"
@@ -7471,6 +7640,11 @@ preact@^10.0.5:
resolved "https://registry.yarnpkg.com/preact/-/preact-10.19.2.tgz#841797620dba649aaac1f8be42d37c3202dcea8b"
integrity sha512-UA9DX/OJwv6YwP9Vn7Ti/vF80XL+YA5H2l7BpCtUr3ya8LWHFzpiO5R+N7dN16ujpIxhekRFuOOF82bXX7K/lg==
prefix-style@2.0.1:
version "2.0.1"
resolved "https://registry.yarnpkg.com/prefix-style/-/prefix-style-2.0.1.tgz#66bba9a870cfda308a5dc20e85e9120932c95a06"
integrity sha512-gdr1MBNVT0drzTq95CbSNdsrBDoHGlb2aDJP/FoY+1e+jSDPOb1Cv554gH2MGiSr2WTcXi/zu+NaFzfcHQkfBQ==
prelude-ls@^1.2.1:
version "1.2.1"
resolved "https://nexus.cmd.navi-tech.in/repository/navi-commons/prelude-ls/-/prelude-ls-1.2.1.tgz"
@@ -7641,7 +7815,7 @@ quick-lru@^4.0.1:
resolved "https://nexus.cmd.navi-tech.in/repository/navi-commons/quick-lru/-/quick-lru-4.0.1.tgz"
integrity sha512-ARhCpm70fzdcvNQfPoy49IaanKkTlRWF2JMzqhcJbhSFRZv7nPTvZJdcY7301IPmvW+/p0RgIWnQDLJxifsQ7g==
raf@^3.4.1:
raf@^3.1.0, raf@^3.4.1:
version "3.4.1"
resolved "https://nexus.cmd.navi-tech.in/repository/navi-commons/raf/-/raf-3.4.1.tgz"
integrity sha512-Sq4CW4QhwOHE8ucn6J34MqtZCeWFP2aQSmrlroYgqAV1PjStIhJXxYuTgUIfkEk7zTLjmIjLmU5q+fbD1NnOJA==
@@ -7684,6 +7858,15 @@ react-async-script@^1.1.1:
hoist-non-react-statics "^3.3.0"
prop-types "^15.5.0"
react-custom-scrollbars@^4.2.0:
version "4.2.1"
resolved "https://registry.yarnpkg.com/react-custom-scrollbars/-/react-custom-scrollbars-4.2.1.tgz#830fd9502927e97e8a78c2086813899b2a8b66db"
integrity sha512-VtJTUvZ7kPh/auZWIbBRceGPkE30XBYe+HktFxuMWBR2eVQQ+Ur6yFJMoaYcNpyGq22uYJ9Wx4UAEcC0K+LNPQ==
dependencies:
dom-css "^2.0.0"
prop-types "^15.5.10"
raf "^3.1.0"
react-dom@^15.6.1:
version "15.7.0"
resolved "https://registry.npmjs.org/react-dom/-/react-dom-15.7.0.tgz"
@@ -7716,6 +7899,11 @@ react-hook-form@7.38.0:
resolved "https://nexus.cmd.navi-tech.in/repository/navi-commons/react-hook-form/-/react-hook-form-7.38.0.tgz"
integrity sha512-gxWW1kMeru9xR1GoR+Iw4hA+JBOM3SHfr4DWCUKY0xc7Vv1MLsF109oHtBeWl9shcyPFx67KHru44DheN0XY5A==
react-icons@^4.1.0:
version "4.12.0"
resolved "https://registry.yarnpkg.com/react-icons/-/react-icons-4.12.0.tgz#54806159a966961bfd5cdb26e492f4dafd6a8d78"
integrity sha512-IBaDuHiShdZqmfc/TwHu6+d6k2ltNCf3AszxNmjJc1KUfXdEeRJOKyNvLmAHaarhzGmTSVygNdyu8/opXv2gaw==
react-infinite-scroller@1.2.6:
version "1.2.6"
resolved "https://registry.yarnpkg.com/react-infinite-scroller/-/react-infinite-scroller-1.2.6.tgz#8b80233226dc753a597a0eb52621247f49b15f18"
@@ -8799,6 +8987,11 @@ symbol-tree@^3.2.4:
resolved "https://nexus.cmd.navi-tech.in/repository/navi-commons/symbol-tree/-/symbol-tree-3.2.4.tgz"
integrity sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw==
synthetic-dom@^1.4.0:
version "1.4.0"
resolved "https://registry.yarnpkg.com/synthetic-dom/-/synthetic-dom-1.4.0.tgz#d988d7a4652458e2fc8706a875417af913e4dd34"
integrity sha512-mHv51ZsmZ+ShT/4s5kg+MGUIhY7Ltq4v03xpN1c8T1Krb5pScsh/lzEjyhrVD0soVDbThbd2e+4dD9vnDG4rhg==
tabbable@^6.0.1:
version "6.2.0"
resolved "https://registry.npmjs.org/tabbable/-/tabbable-6.2.0.tgz"
@@ -8950,11 +9143,23 @@ tmpl@1.0.5:
resolved "https://nexus.cmd.navi-tech.in/repository/navi-commons/tmpl/-/tmpl-1.0.5.tgz"
integrity sha512-3f0uOEAQwIqGuWW2MVzYg8fV/QNnc/IpuJNG837rLuczAaLVHslWHZQj4IGiEl5Hs3kkbhwL9Ab7Hrsmuj+Smw==
to-camel-case@1.0.0:
version "1.0.0"
resolved "https://registry.yarnpkg.com/to-camel-case/-/to-camel-case-1.0.0.tgz#1a56054b2f9d696298ce66a60897322b6f423e46"
integrity sha512-nD8pQi5H34kyu1QDMFjzEIYqk0xa9Alt6ZfrdEMuHCFOfTLhDG5pgTu/aAM9Wt9lXILwlXmWP43b8sav0GNE8Q==
dependencies:
to-space-case "^1.0.0"
to-fast-properties@^2.0.0:
version "2.0.0"
resolved "https://nexus.cmd.navi-tech.in/repository/navi-commons/to-fast-properties/-/to-fast-properties-2.0.0.tgz"
integrity sha512-/OaKK0xYrs3DmxRYqL/yDc+FxFUVYhDlXMhRmv3z915w2HF1tnN1omB354j8VUGO/hbRzyD6Y3sA7v7GS/ceog==
to-no-case@^1.0.0:
version "1.0.2"
resolved "https://registry.yarnpkg.com/to-no-case/-/to-no-case-1.0.2.tgz#c722907164ef6b178132c8e69930212d1b4aa16a"
integrity sha512-Z3g735FxuZY8rodxV4gH7LxClE4H0hTIyHNIHdk+vpQxjLm0cwnKXq/OFVZ76SOQmto7txVcwSCwkU5kqp+FKg==
to-regex-range@^5.0.1:
version "5.0.1"
resolved "https://nexus.cmd.navi-tech.in/repository/navi-commons/to-regex-range/-/to-regex-range-5.0.1.tgz"
@@ -8962,6 +9167,18 @@ to-regex-range@^5.0.1:
dependencies:
is-number "^7.0.0"
to-space-case@^1.0.0:
version "1.0.0"
resolved "https://registry.yarnpkg.com/to-space-case/-/to-space-case-1.0.0.tgz#b052daafb1b2b29dc770cea0163e5ec0ebc9fc17"
integrity sha512-rLdvwXZ39VOn1IxGL3V6ZstoTbwLRckQmn/U8ZDLuWwIXNpuZDhQ3AiRUlhTbOXFVE9C+dR51wM0CBDhk31VcA==
dependencies:
to-no-case "^1.0.0"
to-style@^1.3.3:
version "1.3.3"
resolved "https://registry.yarnpkg.com/to-style/-/to-style-1.3.3.tgz#63a2b70a6f4a7d4fdc2ed57a0be4e7235cb6699c"
integrity sha512-9K8KYegr9hrdm8yPpu5iZjJp5t6RPAp4gFDU5hD9zR8hwqgF4fsoSitMtkRKQG2qkP5j/uG3wajbgV09rjmIqg==
tough-cookie@^4.0.0:
version "4.1.3"
resolved "https://registry.npmjs.org/tough-cookie/-/tough-cookie-4.1.3.tgz"
@@ -9167,6 +9384,11 @@ typescript@^4.5.4:
resolved "https://nexus.cmd.navi-tech.in/repository/navi-commons/typescript/-/typescript-4.9.5.tgz"
integrity sha512-1FXk9E2Hm+QzZQ7z+McJiHL4NW1F2EzMu9Nq9i3zAaGqibafqYwCVU6WyWAuyQRRzOlxou8xZSyXLEN8oKj24g==
ua-parser-js@^0.7.18:
version "0.7.38"
resolved "https://registry.yarnpkg.com/ua-parser-js/-/ua-parser-js-0.7.38.tgz#f497d8a4dc1fec6e854e5caa4b2f9913422ef054"
integrity sha512-fYmIy7fKTSFAhG3fuPlubeGaMoAd6r0rSnfEsO5nEY55i26KSLt9EH7PLQiiqPUhNqYIJvSkTy1oArIcXAbPbA==
ua-parser-js@^0.7.30:
version "0.7.35"
resolved "https://registry.npmjs.org/ua-parser-js/-/ua-parser-js-0.7.35.tgz"