pager-widget 0.2.6 → 0.2.8

package/ConsentPopup.jsx

@@ -8,13 +8,162 @@ import {
   windowHeight,
 } from "react-device-detect";
 import axios from "axios";
+import styled from "styled-components";
 
 import { useState, useEffect } from "react";
 import AssistantMd, {
   evalNormalOrJoinText,
   parseUrlAndString,
-} from "./md/assistant_md"
+} from "./md/assistant_md";
 import { EndPointContext } from "./useEndpoint";
+
+const Container = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 10px;
+  margin-bottom: 12px;
+`;
+
+const MessageContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 6px;
+  width: 100%;
+`;
+
+const BotHeader = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 0 26px;
+  width: 100%;
+`;
+
+const BotLabel = styled.span`
+  font-family: "Inter", sans-serif;
+  font-size: clamp(0.75rem, calc(0.5rem + 0.3125vw), 0.875rem);
+  font-weight: 500;
+  color: #020618;
+  line-height: 18px;
+`;
+
+const MessageBubbleContainer = styled.div`
+  display: flex;
+  align-items: flex-start;
+  gap: 4px;
+`;
+
+const AvatarContainer = styled.div`
+  width: 26px;
+  height: 26px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`;
+
+const AvatarImage = styled.div`
+  width: 24px;
+  height: 24px;
+`;
+
+const MessageCard = styled.div`
+  background: #f4f4f5;
+  border-radius: 8px;
+  padding: 14px;
+`;
+
+const MessageText = styled.p`
+  font-family: "Inter", sans-serif;
+  font-size: clamp(0.875rem, calc(0.625rem + 0.3125vw), 1rem);
+  font-weight: 400;
+  color: #020618;
+  line-height: 20px;
+  margin-bottom: 10px;
+  margin-top: 0px;
+`;
+
+const SuggestionContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  width: 100%;
+`;
+
+const SuggestionButton = styled.button`
+  width: 100%;
+  padding: 6px;
+  background: white;
+  border: 1px solid #e4e4e7;
+  border-radius: 6px;
+  color: #314158;
+  font-family: "Inter", sans-serif;
+  font-size: clamp(0.875rem, calc(0.625rem + 0.3125vw), 1rem);
+  font-weight: 500;
+  line-height: 20px;
+  cursor: pointer;
+
+  &:hover {
+    background: #ebefff;
+    border: 1px solid #4b2fff;
+    color: #4b2fff;
+  }
+`;
+
+const BottomContainer = styled.div`
+  display: flex;
+  width: 289px;
+  align-items: flex-start;
+  gap: 4px;
+`;
+
+const Timestamp = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 0 8px 0 30px;
+  flex: 1;
+`;
+
+const TimestampText = styled.span`
+  font-family: "Inter", sans-serif;
+  font-size: clamp(0.75rem, calc(0.5rem + 0.3125vw), 0.875rem);
+  font-weight: 400;
+  color: #45556c;
+  line-height: 18px;
+`;
+
+const ReactionContainer = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  padding-right: 8px;
+`;
+
+const ReactionButton = styled.button`
+  width: 22px;
+  height: 22px;
+  padding: 4px;
+  background: #f4f4f5;
+  border-radius: 50%;
+  border: none;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  &:hover {
+    background: #e4e4e7;
+  }
+
+  svg {
+    width: 14px;
+    height: 14px;
+  }
+`;
+
 const ConsentPopup = ({
   formData,
   conversationId,
@@ -24,51 +173,47 @@ const ConsentPopup = ({
   isVisible,
   setIsVisible,
   setSourceState,
-  userDetails
- 
+  userDetails,
 }) => {
- 
   const [deviceLocation, setDeviceLocation] = useState("");
 
   // const consentOutput = JSON.parse(widget?.consent_data)
 
-  const endpoint = useContext(EndPointContext)
+  const endpoint = useContext(EndPointContext);
   console.log("ConsentPopup Endpoint:", endpoint);
-  console.log("consent widget", widget?.accent_color)
+  console.log("consent widget", widget?.accent_color);
   const handleCheckboxChange = (event) => {
     setIsVisible(event.target.checked);
   };
   useEffect(() => {
     if (navigator.geolocation) {
-      navigator.geolocation.getCurrentPosition(
-        (position) => {
-          setDeviceLocation({
-            lat: position.coords.latitude,
-            long: position.coords.longitude,
-          });
-          axios.get(`https://nominatim.openstreetmap.org/reverse?format=json&lat=${position.coords.latitude}&lon=${position.coords.longitude}`).then((res)=> {
-            
-            setDeviceLocation(res.data.address?.country)
-          }).catch((err)=> {
-            setDeviceLocation("")
+      navigator.geolocation.getCurrentPosition((position) => {
+        setDeviceLocation({
+          lat: position.coords.latitude,
+          long: position.coords.longitude,
+        });
+        axios
+          .get(
+            `https://nominatim.openstreetmap.org/reverse?format=json&lat=${position.coords.latitude}&lon=${position.coords.longitude}`
+          )
+          .then((res) => {
+            setDeviceLocation(res.data.address?.country);
           })
-
-        },
-      
-      );
+          .catch((err) => {
+            setDeviceLocation("");
+          });
+      });
     } else {
-      setDeviceLocation("")
+      setDeviceLocation("");
       console.error("Geolocation is not supported by this browser.");
     }
   }, []);
 
   const handleSubmit = () => {
-
-
     const timeZone = Intl.DateTimeFormat().resolvedOptions().timeZone;
     const language = navigator.language;
 
-    console.log("url location",window.location)
+    console.log("url location", window.location);
     const systemDetails = [
       { field_id: "SYS_browser", value: browserName },
       { field_id: "SYS_browser_os", value: osName },
@@ -87,8 +232,8 @@ const ConsentPopup = ({
       // Correctly updated location
       {
         field_id: "SYS_From_Page",
-        value:  window.location.origin
-      }
+        value: window.location.origin,
+      },
     ];
 
     const submissionPayload = {
@@ -124,86 +269,111 @@ const ConsentPopup = ({
       });
   };
 
-console.log("url location", window.location.origin)
+  const suggestionOptions = [
+    { title: "Yes", func: handleSubmit },
+    { title: "No", func: () => {} },
+  ];
+
+  console.log("url location", window.location.origin);
 
   return (
-    <div style={
-      {
+    <div
+      style={{
         display: "flex",
         flexDirection: "column",
-        justifyContent: "end",
-        height:"100%",
-        width:"100%"
-        
-      }
-    }>
-      <div style={{
-        display:"flex",
-        alignItems:"start",
-        paddingBottom: "16px",
-        gap:"8px"
-
-      }}>
-      <input
-        type="checkbox"
-        id="consentCheckbox"
-        checked={isVisible}
-        onChange={handleCheckboxChange}
-      />
-      {console.log("output struct 2", widget.consent_data)}
-      <div style={{
-        fontSize: "16px",
-        fontWeight: "400",
-        lineHeight: "24px",
-        fontFamily: "Inter, Open Sans"
-        
-
-
-      }}>
-    <AssistantMd mdText={widget?.consent_data}/>
-    </div>
-    
-      
-      {/* <AssistantMd mdText={{
-    
-    "type": "join",
-    "lhs": {
-        "type": "text",
-        "value": "Hi haha"
-    },
-    "rhs": {
-        "type": "bold",
-        "value": {
-            "type": "text",
-            "value": "Hello "
-        }
-    }
+        justifyContent: "flex-start",
+        height: "100%",
+        width: "100%",
+      }}
+    >
+      <Container>
+        <MessageContainer>
+          <BotHeader>
+            <BotLabel>{widget && widget.name}</BotLabel>
+          </BotHeader>
+          <MessageBubbleContainer>
+            <AvatarContainer>
+              <AvatarImage>
+                <img
+                  alt={"logo"}
+                  src={
+                    (widget && widget.logo_url) ||
+                    "https://workativ-asssistant-widget-images.s3.amazonaws.com/chat_logo.png"
+                  }
+                />
+              </AvatarImage>
+            </AvatarContainer>
+            <MessageCard>
+              <MessageText>
+                <AssistantMd mdText={widget?.consent_data} />
+              </MessageText>
 
-}}/> */}
-      {/* <AssistantMd mdText={widget.consent_data}></AssistantMd> */}
-
-      {/* <AssistantMd mdText={consentOutput?.content[0]} userDetails={userDetails}></AssistantMd> */}
+              <SuggestionContainer>
+                {suggestionOptions.map((option, index) => (
+                  <SuggestionButton onClick={option?.func} key={index}>
+                    {option?.title}
+                  </SuggestionButton>
+                ))}
+              </SuggestionContainer>
+            </MessageCard>
+          </MessageBubbleContainer>
+          <BottomContainer>
+            <Timestamp>
+              <TimestampText>Just now</TimestampText>
+            </Timestamp>
+            <ReactionContainer></ReactionContainer>
+          </BottomContainer>
+        </MessageContainer>
+      </Container>
+      {/* <div
+        style={{
+          display: "flex",
+          alignItems: "start",
+          paddingBottom: "16px",
+          gap: "8px",
+        }}
+      >
+        <input
+          type="checkbox"
+          id="consentCheckbox"
+          checked={isVisible}
+          onChange={handleCheckboxChange}
+        />
+        {console.log("output struct 2", widget.consent_data)}
+        <div
+          style={{
+            fontSize: "16px",
+            fontWeight: "400",
+            lineHeight: "24px",
+            fontFamily: "Inter, Open Sans",
+          }}
+        >
+          <AssistantMd mdText={widget?.consent_data} />
+        </div>
       </div>
-      <div style={{
-        width:"100%",
-        paddingTop: "16px",
-        borderTop: "1px solid lightgrey",
-        display:"flex",
-        justifyContent:"center"
-
-      }}>
+      <div
+        style={{
+          width: "100%",
+          paddingTop: "16px",
+          borderTop: "1px solid lightgrey",
+          display: "flex",
+          justifyContent: "center",
+        }}
+      >
         <button
-          
           disabled={isVisible == false ? true : false}
-          style={{...popupStyles.button, width: "90%", background:isVisible === false ?"#E2E8F0":widget?.accent_color}}
+          style={{
+            ...popupStyles.button,
+            width: "90%",
+            background: isVisible === false ? "#E2E8F0" : widget?.accent_color,
+          }}
           onClick={handleSubmit}
         >
           Submit
         </button>
-      </div>
+      </div> */}
     </div>
   );
-
 };
 
 const popupStyles = {
@@ -229,7 +399,7 @@ const popupStyles = {
   },
   title: {
     marginBottom: "20px",
-    fontSize: "18px",
+    fontSize: "clamp(1.125rem, calc(0.875rem + 0.3125vw), 1.25rem)",
     color: "#333",
   },
   buttonContainer: {
@@ -238,13 +408,13 @@ const popupStyles = {
   },
   button: {
     padding: "10px 20px",
-    fontSize: "16px",
+    fontSize: "clamp(1rem, calc(0.75rem + 0.3125vw), 1.125rem)",
     border: "none",
     borderRadius: "4px",
     cursor: "pointer",
     backgroundColor: "#007bff",
     color: "white",
-    width: "90%"
+    width: "90%",
   },
 };
 

package/Dropdown.jsx

@@ -1,24 +1,25 @@
 import React, { useState } from "react";
 import { countries } from "country-codes-flags-phone-codes";
 import styled from "styled-components";
+import { SearchIcon } from "./App";
 
 const DropdownWrapper = styled.div`
   width: 100%;
   position: relative;
-  
 `;
 const DropdownContent = styled.span`
   border-radius: 8px;
-  border: 1px solid ${({ error }) => (error === "true" ? "var(--red-300, #FFA2A2)" : "var(--k300, #d0d5dd)")};
-  
-  font-size: 14px;
+  border: 1px solid
+    ${({ error }) =>
+      error === "true" ? "var(--red-300, #FFA2A2)" : "transparent"};
+  font-size: clamp(0.875rem, calc(0.625rem + 0.3125vw), 1rem);
   font-style: normal;
   font-weight: 400;
   background: #fff;
-  padding: 10px 30px 10px 2px; 
+  padding: 10px 10px 10px 16px;
   cursor: pointer;
-  width: 91%;
-  height: 24px;
+  width: 90%;
+  height: 14px;
   display: flex;
   justify-content: space-between;
   align-items: center;
@@ -39,17 +40,16 @@ const DropdownList = styled.div`
   height: 250px;
 `;
 const DropdownInput = styled.input`
-  width: 100%;
-  padding-left: 20px;
-  border-bottom: 1px solid #d0d5dd;
+  width: 94%;
+  padding-left: 16px;
+  margin-left: 3%;
+  margin-top: 7px;
+  border-radius: 8px;
+  border: 1px solid #d0d5dd;
   outline: none;
-  border-top: none;
-  border-left: none;
-  border-right: none;
+  font-size: clamp(0.875rem, calc(0.625rem + 0.3125vw), 1rem);
   background: transparent;
-  height: 40px;
-  
- 
+  height: 36px;
 `;
 const DropdownNode = styled.span`
   padding: 8px 8px;
@@ -57,7 +57,7 @@ const DropdownNode = styled.span`
   cursor: pointer;
 `;
 
-const Dropdown = ({error,updateFieldValue, fieldId}) => {
+const Dropdown = ({ error, updateFieldValue, fieldId }) => {
   const [selectedCountry, setSelectedCountry] = useState({
     flag: null,
     country: "Select a country",
@@ -73,16 +73,17 @@ const Dropdown = ({error,updateFieldValue, fieldId}) => {
   const handleSelectDropdown = (flag, country) => {
     setSelectedCountry({ flag, country });
     setIsDropDownOpen(false);
-    updateFieldValue(fieldId, country)
-  
+    updateFieldValue(fieldId, country);
   };
 
   return (
     <>
-   
       <DropdownWrapper>
-        <DropdownContent error={error} onClick={() => setIsDropDownOpen(!isDropDownOpen)}>
-          {selectedCountry.flag && selectedCountry.flag} &nbsp;{" "}
+        <DropdownContent
+          error={error}
+          onClick={() => setIsDropDownOpen(!isDropDownOpen)}
+        >
+          {selectedCountry.flag && selectedCountry.flag}{" "}
           {selectedCountry.country}{" "}
           <span style={{ rotate: isDropDownOpen ? "180deg" : "0deg" }}>
             <svg
@@ -104,7 +105,20 @@ const Dropdown = ({error,updateFieldValue, fieldId}) => {
         </DropdownContent>
         {isDropDownOpen && (
           <DropdownList>
-            <DropdownInput onChange={(e) => setSearchQuery(e.target.value)} placeholder="search..." />
+            <div style={{ position: "relative" }}>
+              <DropdownInput
+                onChange={(e) => setSearchQuery(e.target.value)}
+                placeholder="Search..."
+              />
+              <SearchIcon
+                style={{
+                  color: "#a7aaaf",
+                  position: "absolute",
+                  right: "7%",
+                  top: "15px",
+                }}
+              />
+            </div>
             <div
               style={{
                 height: "220px",
@@ -139,7 +153,6 @@ const Dropdown = ({error,updateFieldValue, fieldId}) => {
         )}
       </DropdownWrapper>
     </>
-    
   );
 };