pager-widget 0.0.5 → 0.2.0

package/App.jsx

@@ -12,6 +12,9 @@ import { convertToMDText } from "./md/md_format_converter";
 import { formatTimeAMPM } from "./lib";
 import styled from "styled-components";
 import useWidgetService from "./useWidgetService";
+import InputConverter from "./InputConverter";
+import ConsentPopup from "./ConsentPopup";
+import axios from "axios";
 
 const switchSize = (size, small, medium, large) => {
   //  ;
@@ -2374,6 +2377,7 @@ const IconSpan = styled.span`
     transition: 0.3s;
   }
 `;
+
 const ButtonWrapper = styled.div`
   width: 100%;
   float: left;
@@ -2462,6 +2466,13 @@ const App = ({
   style,
 }) => {
   //  ;
+
+  const [sourceState, setSourceState] = useState(widget?.source_id);
+
+  const [enableConsent, setEnableConsent] = useState(false);
+  const [workspace, setWorkspace] = useState(widget?.workspace);
+
+  const [fields, setFields] = useState();
   const {
     connected,
     messages,
@@ -2478,10 +2489,44 @@ const App = ({
     authToken,
     newToken,
     userDetails,
+    sourceState,
+
+    // enableConsent,
   });
+
+  const conversationId = messages[0]?.message?.system?.conversationId;
+
   const [open, setOpen] = useState(openByDefault);
+  const [isVisible, setIsVisible] = useState(false);
+  const [formSubmit, setFormSubmit] = useState(false);
 
   const containerEl = useRef(null);
+
+  useEffect(() => {
+    if (widget?.source_id !== undefined) {
+      setSourceState(widget?.source_id);
+    }
+  }, [widget]);
+  
+  useEffect(() => {
+    if (!widget?.id) return; // Prevent API call if widget ID is undefined
+
+  
+
+    axios
+      .get(
+        `http://dev.pagergpt.ai/wgt-hook/public/${widget?.workspace}/${widget.id}/form`
+      )
+      .then((res) => {
+    
+        setFields(res.data);
+
+      })
+      .catch((err) => {
+        console.error("Error fetching form:", err);
+      });
+  }, [widget?.id, formSubmit]);
+
   useEffect(() => {
     if (containerEl.current) {
       containerEl.current.scroll(0, containerEl.current.scrollHeight);
@@ -2507,16 +2552,43 @@ const App = ({
             />
             <ChatContentWrapper
               size={widget_size}
-              className="widget_chat_content"
+              clsassName="widget_chat_content"
               ref={containerEl}
             >
               <BodyWrapper
+                sourceState={sourceState}
                 {...{ messages }}
                 sendMessage={sendMessage}
                 sendFeedback={sendFeedback}
                 widget={widget}
                 style={style}
               />
+              {sourceState === "new_user" && widget.user_consent == true && (
+                <ConsentPopup
+                  formData={fields}
+                  conversationId={conversationId}
+                  widget={widget}
+                  enableConsent={enableConsent}
+                  setEnableConsent={setEnableConsent}
+                  isVisible={isVisible}
+                  setIsVisible={setIsVisible}
+                  setSourceState={setSourceState}
+                />
+              )}
+          
+              {((sourceState &&
+              typeof sourceState === "string" &&
+              sourceState.includes("browser") &&
+              fields && widget?.lead_form_id !== null) || widget.user_consent == false && sourceState == "new_user" && widget?.lead_form_id !== null && fields)? (
+                <InputConverter
+                  formData={fields}
+                  conversationId={conversationId}
+                  widgetId={widget_id}
+                  workspace={widget?.workspace}
+                  setFormSubmit={setFormSubmit}
+                  setSourceState={setSourceState}
+                />
+              ) : null}
             </ChatContentWrapper>
             <Footer
               {...{ sendMessage, onFileUpload }}
@@ -2591,6 +2663,7 @@ const Footer = ({
     }
   }, [textareaRef.current]);
   const scale = useScaleContext();
+
   return (
     <>
       {typing && (
@@ -2678,43 +2751,34 @@ const Footer = ({
 };
 
 const BodyWrapper = ({
+  sourceState,
   messages,
   sendMessage,
   sendFeedback,
   widget,
   style,
 }) => {
-  // const isSmall = useMedia({ maxWidth: "520px" });
 
-  // const containerEl = useRef(null);
-  // useEffect(() => {
-  //   if (containerEl.current) {
-  //     containerEl.current.scroll(0, containerEl.current.scrollHeight);
-  //   }
-  // });
+
   return (
     <>
-      {/* <div
-        className={`overflow-y-scroll p-3 ${
-          isSmall ? "body_container_mobile" : "body_container"
-        }`}
-        style={
-          isSmall ? { height: "calc(100vh - 132px)" } : { height: "395px" }
-        }
-        ref={containerEl}
-      > */}
       {messages.map((message, key) => (
-        <Message
-          {...{ key, ...message }}
-          sendMessage={sendMessage}
-          sendFeedback={sendFeedback}
-          widget={widget}
-          timestamp={message.time}
-          style={style}
-          key={key}
-        />
+        <>       
+          {((sourceState == "new_user" && widget.user_consent == false) ||
+            sourceState !== "new_user") && (
+            <Message
+              {...{ key, ...message }}
+              sendMessage={sendMessage}
+              sendFeedback={sendFeedback}
+              widget={widget}
+              timestamp={message.time}
+              style={style}
+              key={key}
+            />
+          )}
+        </>
       ))}
-      {/* </div> */}
+     
     </>
   );
 };

package/ConsentPopup.jsx

@@ -0,0 +1,175 @@
+import React from "react";
+import {
+  browserName,
+  osName,
+  deviceType,
+  getUA,
+  windowWidth,
+  windowHeight,
+} from "react-device-detect";
+import axios from "axios";
+
+import { useState, useEffect } from "react";
+const ConsentPopup = ({
+  formData,
+  conversationId,
+  widget,
+  enableConsent,
+  setEnableConsent,
+  isVisible,
+  setIsVisible,
+  setSourceState,
+}) => {
+  console.log("consent form data", formData);
+  const [deviceLocation, setDeviceLocation] = useState({
+    lat: "",
+    long: "",
+  });
+
+
+  const handleCheckboxChange = (event) => {
+    setIsVisible(event.target.checked);
+  };
+  useEffect(() => {
+    if (navigator.geolocation) {
+      navigator.geolocation.getCurrentPosition(
+        (position) => {
+          setDeviceLocation({
+            lat: position.coords.latitude,
+            long: position.coords.longitude,
+          });
+        },
+        (error) => {
+          console.error("Error getting location:", error.message);
+        }
+      );
+    } else {
+      console.error("Geolocation is not supported by this browser.");
+    }
+  }, []);
+
+  const handleSubmit = () => {
+
+
+    const timeZone = Intl.DateTimeFormat().resolvedOptions().timeZone;
+    const language = navigator.language;
+
+    const systemDetails = [
+      { field_id: "SYS_browser", value: browserName },
+      { field_id: "SYS_browser_os", value: osName },
+      { field_id: "SYS_browser_language", value: language },
+      {
+        field_id: "SYS_screen_resolution",
+        value: `${window.screen.width} x ${window.screen.height}`,
+      },
+      { field_id: "SYS_time_zone", value: timeZone },
+      { field_id: "SYS_device_type", value: deviceType },
+
+      {
+        field_id: "SYS_location",
+        value: `Lat: ${deviceLocation.lat}, Long: ${deviceLocation.long}`,
+      }, // Correctly updated location
+    ];
+
+    const submissionPayload = {
+      form_id:
+        formData == "No forms attached to this widget"
+          ? ""
+          : formData.form_data.form_id,
+      conversation_id: conversationId,
+      lead_data: {
+        name:
+          formData == "No forms attached to this widget"
+            ? ""
+            : formData.form_data.name,
+        fields: systemDetails,
+        ws:
+          formData == "No forms attached to this widget"
+            ? widget.workspace
+            : formData.form_data.ws,
+        user_consent: widget.user_consent,
+      },
+      type: "browser",
+    };
+
+    axios
+      .post(
+        `https://dev.pagergpt.ai/wgt-hook/${widget.workspace}/${widget.id}/lead`,
+        submissionPayload,
+        { withCredentials: true }
+      )
+      .then((res) => {
+        setSourceState(res.data.source_id);
+        setEnableConsent(true);
+      });
+  };
+
+  return (
+    <>
+      <input
+        type="checkbox"
+        id="consentCheckbox"
+        checked={isVisible}
+        onChange={handleCheckboxChange}
+      />
+      <label htmlFor="consentCheckbox" style={{ marginLeft: "8px" }}>
+        I am part of the AI services and I am still learning my way around.
+        Clicking "Submit" will confirm your understanding and agreement that use
+        of this feature is subject to our Privacy Policy
+      </label>
+      <div>
+        <button
+          disabled={isVisible == false ? true : false}
+          style={popupStyles.button}
+          onClick={handleSubmit}
+        >
+          Submit
+        </button>
+      </div>
+    </>
+  );
+
+};
+
+const popupStyles = {
+  overlay: {
+    position: "fixed",
+    top: 0,
+    left: 0,
+    width: "100%",
+    height: "100%",
+    backgroundColor: "rgba(0, 0, 0, 0.5)",
+    display: "flex",
+    justifyContent: "center",
+    alignItems: "center",
+    zIndex: 1000,
+  },
+  popup: {
+    background: "white",
+    padding: "20px",
+    borderRadius: "8px",
+    textAlign: "center",
+    boxShadow: "0 4px 8px rgba(0, 0, 0, 0.2)",
+    width: "300px",
+  },
+  title: {
+    marginBottom: "20px",
+    fontSize: "18px",
+    color: "#333",
+  },
+  buttonContainer: {
+    display: "flex",
+    justifyContent: "space-around",
+  },
+  button: {
+    padding: "10px 20px",
+    fontSize: "16px",
+    border: "none",
+    borderRadius: "4px",
+    cursor: "pointer",
+    backgroundColor: "#007bff",
+    color: "white",
+  },
+};
+
+export default ConsentPopup;