Added send location feature

.github/workflows/gpt-review.yml

@@ -0,0 +1,22 @@
+name: AI Code Reviewer
+
+on:
+  pull_request:
+    types:
+      - opened
+      - synchronize
+permissions: write-all
+jobs:
+  review:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout Repo
+        uses: actions/checkout@v3
+
+      - name: AI Code Reviewer
+        uses: glific/ai-codereviewer@main
+        with:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          OPENAI_API_KEY: ${{ secrets.OPENAI_API_KEY }}
+          OPENAI_API_MODEL: "gpt-4" # Optional: defaults to "gpt-4"
+          exclude: "**/*.json, **/*.md" # Optional: exclude patterns separated by commas

package.json

@@ -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",

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;

src/common/utils.ts

@@ -134,6 +134,8 @@
       default:
         break;
     }
+  } else if (interactiveJSON.type === 'location_request_message') {
+    messageBody = interactiveJSON.body.text;
   }
 
   return messageBody;

src/components/simulator/Simulator.tsx

@@ -24,9 +24,10 @@
 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 @@
 } 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 @@
     if (content) {
       isInteractiveContentPresent = !!Object.entries(content).length;
 
-      if (isInteractiveContentPresent && messageType === INTERACTIVE_LIST) {
+      if (isInteractiveContentPresent && messageType === LIST) {
         template = (
           <>
             <ListReplyTemplate
@@ -311,7 +313,7 @@
         );
       }
 
-      if (isInteractiveContentPresent && messageType === INTERACTIVE_QUICK_REPLY) {
+      if (isInteractiveContentPresent && messageType === QUICK_REPLY) {
         template = (
           <QuickReplyTemplate
             {...content}
@@ -323,6 +325,15 @@
           />
         );
       }
+      if (isInteractiveContentPresent && messageType === LOCATION_REQUEST) {
+        template = (
+          <LocationRequestTemplate
+            content={content}
+            isSimulator
+            onSendLocationClick={(payload: any) => sendMessage(sender, payload)}
+          />
+        );
+      }
     }
 
     return (
@@ -386,7 +397,7 @@
       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 {

src/containers/Chat/ChatMessages/ChatMessage/ChatMessage.tsx

@@ -9,9 +9,10 @@
 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 { 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 @@
   }
 
   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(',');

src/containers/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;
+}

src/containers/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>
+  );
+};