Merge remote-tracking branch 'origin/master' into templates-copy

glific · Nov 29, 2023 · de4083a · de4083a
2 parents 41ca955 + 34ef64c
commit de4083a
Show file tree

Hide file tree

Showing 16 changed files with 554 additions and 254 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "glific-frontend",
-  "version": "4.12.0",
+  "version": "4.13.1",
   "private": true,
   "dependencies": {
     "@apollo/client": "^3.8.6",
@@ -18,7 +18,7 @@
     "@emoji-mart/react": "^1.1.1",
     "@emotion/react": "^11.11.1",
     "@emotion/styled": "^11.11.0",
-    "@glific/flow-editor": "^1.19.3",
+    "@glific/flow-editor": "^1.19.3-1",
     "@mui/icons-material": "^5.14.16",
     "@mui/material": "^5.14.16",
     "@mui/x-date-pickers": "^6.17.0",

diff --git a/src/common/constants.ts b/src/common/constants.ts
@@ -152,6 +152,9 @@ export const GUPSHUP_QUICK_REPLY =
 export const CALL_TO_ACTION = 'CALL_TO_ACTION';
 export const LIST = 'LIST';
 export const QUICK_REPLY = 'QUICK_REPLY';
+export const LOCATION_REQUEST = 'LOCATION_REQUEST_MESSAGE';
+export const TERMS_OF_USE_LINK = 'https://tides.coloredcow.com/terms-of-use';
+export const COMPACT_MESSAGE_LENGTH = 35;
 
 // Gupshup sample media
 export const SAMPLE_MEDIA_FOR_SIMULATOR = [
@@ -209,10 +212,3 @@ export const yupPasswordValidation = (t: any) =>
     )
     .min(10, t('Password must be at least 10 characters long.'))
     .required(t('Input required'));
-
-export const INTERACTIVE_QUICK_REPLY = 'QUICK_REPLY';
-export const INTERACTIVE_LIST = 'LIST';
-
-export const TERMS_OF_USE_LINK = 'https://tides.coloredcow.com/terms-of-use';
-
-export const COMPACT_MESSAGE_LENGTH = 35;
diff --git a/src/common/utils.ts b/src/common/utils.ts
@@ -134,6 +134,8 @@ export const getInteractiveMessageBody = (interactiveJSON: any) => {
       default:
         break;
     }
+  } else if (interactiveJSON.type === 'location_request_message') {
+    messageBody = interactiveJSON.body.text;
   }
 
   return messageBody;

diff --git a/src/components/UI/Pager/Pager.tsx b/src/components/UI/Pager/Pager.tsx
@@ -45,10 +45,14 @@ const collapsedRowData = (dataObj: any, columnStyles: any, recordId: any) => {
       </TableRow>
     );
   }
+  console.log(dataObj);
 
   const additionalRowInformation = Object.keys(dataObj).map((key, index) => {
     const rowIdentifier = `collapsedRowData-${recordId}-${index}`;
 
+    // This is for location translation type where the text is inside body.
+    const body = typeof dataObj[key].body === 'string' ? dataObj[key].body : dataObj[key].body.text;
+
     return (
       <TableRow className={styles.CollapseTableRow} key={rowIdentifier}>
         <TableCell className={`${styles.TableCell} ${columnStyles ? columnStyles[0] : null}`}>
@@ -58,11 +62,9 @@ const collapsedRowData = (dataObj: any, columnStyles: any, recordId: any) => {
         </TableCell>
         <TableCell className={`${styles.TableCell} ${columnStyles ? columnStyles[1] : null}`}>
           <div>
-            <p className={styles.TableText}>{dataObj[key].body}</p>
+            <p className={styles.TableText}>{body}</p>
           </div>
         </TableCell>
-        <TableCell className={`${styles.TableCell} ${columnStyles ? columnStyles[2] : null}`} />
-        <TableCell className={`${styles.TableCell} ${columnStyles ? columnStyles[3] : null}`} />
       </TableRow>
     );
   });

diff --git a/src/components/simulator/Simulator.tsx b/src/components/simulator/Simulator.tsx
@@ -24,9 +24,10 @@ import ResetIcon from 'assets/images/icons/Reset/Dark.svg?react';
 import {
   TIME_FORMAT,
   SAMPLE_MEDIA_FOR_SIMULATOR,
-  INTERACTIVE_LIST,
-  INTERACTIVE_QUICK_REPLY,
+  LIST,
+  QUICK_REPLY,
   DEFAULT_MESSAGE_LIMIT,
+  LOCATION_REQUEST,
 } from 'common/constants';
 import { GUPSHUP_CALLBACK_URL } from 'config';
 import { ChatMessageType } from 'containers/Chat/ChatMessages/ChatMessage/ChatMessageType/ChatMessageType';
@@ -54,6 +55,7 @@ import {
 } from 'graphql/subscriptions/Simulator';
 import { updateSimulatorConversations } from 'services/SubscriptionService';
 import styles from './Simulator.module.css';
+import { LocationRequestTemplate } from 'containers/Chat/ChatMessages/ChatMessage/LocationRequestTemplate/LocationRequestTemplate';
 
 export interface SimulatorProps {
   showSimulator: boolean;
@@ -296,7 +298,7 @@ export const Simulator = ({
     if (content) {
       isInteractiveContentPresent = !!Object.entries(content).length;
 
-      if (isInteractiveContentPresent && messageType === INTERACTIVE_LIST) {
+      if (isInteractiveContentPresent && messageType === LIST) {
         template = (
           <>
             <ListReplyTemplate
@@ -311,7 +313,7 @@ export const Simulator = ({
         );
       }
 
-      if (isInteractiveContentPresent && messageType === INTERACTIVE_QUICK_REPLY) {
+      if (isInteractiveContentPresent && messageType === QUICK_REPLY) {
         template = (
           <QuickReplyTemplate
             {...content}
@@ -323,6 +325,15 @@ export const Simulator = ({
           />
         );
       }
+      if (isInteractiveContentPresent && messageType === LOCATION_REQUEST) {
+        template = (
+          <LocationRequestTemplate
+            content={content}
+            isSimulator
+            onSendLocationClick={(payload: any) => sendMessage(sender, payload)}
+          />
+        );
+      }
     }
 
     return (
@@ -386,7 +397,7 @@ export const Simulator = ({
       const { templateType, interactiveContent } = interactiveMessage;
       const previewMessage = renderMessage(interactiveMessage, 'received', 0, true);
       setSimulatedMessage(previewMessage);
-      if (templateType === INTERACTIVE_LIST) {
+      if (templateType === LIST) {
         const { items } = JSON.parse(interactiveContent);
         setSelectedListTemplate(items);
       } else {

diff --git a/src/containers/Chat/ChatMessages/ChatMessage/ChatMessage.tsx b/src/containers/Chat/ChatMessages/ChatMessage/ChatMessage.tsx
@@ -9,9 +9,10 @@ import MessageIcon from 'assets/images/icons/Dropdown.svg?react';
 import {
   DATE_FORMAT,
   TIME_FORMAT,
-  INTERACTIVE_LIST,
-  INTERACTIVE_QUICK_REPLY,
+  LIST,
+  QUICK_REPLY,
   VALID_URL_REGEX,
+  LOCATION_REQUEST,
 } from 'common/constants';
 import { WhatsAppToJsx, WhatsAppTemplateButton } from 'common/RichEditor';
 import { Tooltip } from 'components/UI/Tooltip/Tooltip';
@@ -23,6 +24,7 @@ import { ListReplyTemplate, ChatTemplate } from '../ListReplyTemplate/ListReplyT
 import { QuickReplyTemplate } from '../QuickReplyTemplate/QuickReplyTemplate';
 import styles from './ChatMessage.module.css';
 import { setNotification } from 'common/notification';
+import { LocationRequestTemplate } from './LocationRequestTemplate/LocationRequestTemplate';
 
 export interface ChatMessageProps {
   id: number;
@@ -260,14 +262,18 @@ export const ChatMessage = ({
   }
 
   let template = null;
-  if (type === INTERACTIVE_LIST) {
+  if (type === LIST) {
     template = <ListReplyTemplate {...content} disabled component={ChatTemplate} />;
   }
 
-  if (type === INTERACTIVE_QUICK_REPLY) {
+  if (type === QUICK_REPLY) {
     template = <QuickReplyTemplate {...content} disabled />;
   }
 
+  if (type === LOCATION_REQUEST) {
+    template = <LocationRequestTemplate content={content} disabled />;
+  }
+
   let displayLabel;
   if (flowLabel) {
     const labels = flowLabel.split(',');

diff --git a/.../Chat/ChatMessages/ChatMessage/LocationRequestTemplate/LocationRequestTemplate.module.css b/.../Chat/ChatMessages/ChatMessage/LocationRequestTemplate/LocationRequestTemplate.module.css
@@ -0,0 +1,26 @@
+.MessageContent {
+  max-width: 100%;
+  border-radius: 12px 12px 0px 0px;
+  font-family: 'Heebo', sans-serif, emoji;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
+  clear: both;
+  max-width: 404px;
+  min-width: 85px;
+  padding: 10px;
+  background: white;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+}
+
+.SimulatorButton {
+  width: 100%;
+  text-transform: none !important;
+  border-radius: 0px 0px 15px 15px !important;
+  background: white !important;
+  border: 1px solid rgba(0, 0, 0, 0.1) !important;
+  border-top: none !important
+}
+
+.ChatButton {
+  composes: SimulatorButton;
+  padding: 5px 20px !important;
+}
diff --git a/...tainers/Chat/ChatMessages/ChatMessage/LocationRequestTemplate/LocationRequestTemplate.tsx b/...tainers/Chat/ChatMessages/ChatMessage/LocationRequestTemplate/LocationRequestTemplate.tsx
@@ -0,0 +1,48 @@
+import { Button } from '@mui/material';
+import LocationIconDark from 'assets/images/icons/Location/Dark.svg?react';
+import styles from './LocationRequestTemplate.module.css';
+import { ChatMessageType } from '../ChatMessageType/ChatMessageType';
+
+export interface LocationRequestTemplateProps {
+  content: any;
+  disabled?: boolean;
+
+  isSimulator?: boolean;
+  onSendLocationClick?: any;
+}
+
+const locationPayload = {
+  type: 'location',
+  name: 'location',
+  id: 'LOCATION',
+  payload: {
+    latitude: '41.725556',
+    longitude: '-49.946944',
+  },
+};
+
+export const LocationRequestTemplate = ({
+  content,
+  disabled = false,
+  isSimulator = false,
+
+  onSendLocationClick = () => {},
+}: LocationRequestTemplateProps) => {
+  const body = content.body.text;
+  return (
+    <div>
+      <div className={styles.MessageContent}>
+        <ChatMessageType type="TEXT" body={body} isSimulatedMessage={isSimulator} />
+      </div>
+      <Button
+        variant="text"
+        disabled={disabled}
+        startIcon={<LocationIconDark />}
+        onClick={() => onSendLocationClick({ payload: locationPayload })}
+        className={isSimulator ? styles.SimulatorButton : styles.ChatButton}
+      >
+        Send Location
+      </Button>
+    </div>
+  );
+};