pager-widget 0.2.1 → 0.2.3

package/InputConverter.jsx

@@ -1,24 +1,126 @@
-import React, { useState } from "react";
+import React, { useContext, useState } from "react";
 import { countries } from "country-codes-flags-phone-codes";
 import axios from "axios";
 import styled from "styled-components";
+import Dropdown from "./Dropdown";
+import { EndPointContext } from "./useEndpoint";
 
-console.log("country", countries);
+const InputWrapper = styled.div`
+  position: relative;
+  width: 100%;
+
+  input {
+    border-radius: 8px;
+    border: 1px solid
+      ${({ error }) =>
+        error === "true" ? "var(--red-300, #FFA2A2)" : "var(--k300, #d0d5dd)"};
+    background: #fff;
+    outline: none;
+    height: 44px;
+    width: 100%;
+    text-indent: 12px;
+    padding-right: 40px; /* Space for icon */
+
+    ::placeholder {
+      color: #98a2b3;
+      font-size: 14px;
+      font-style: normal;
+      font-weight: 400;
+      line-height: normal;
+    }
+  }
+
+  /* Error icon */
+  svg {
+    position: absolute;
+    right: 12px;
+    top: 50%;
+    transform: translateY(-50%);
+    display: ${({ error }) =>
+      error === "true" ? "block" : "none"}; /* Show only if error exists */
+  }
+`;
+
+const Form = styled.form`
+  margin-top: 5px;
+`;
+
+Form.Field = styled.div`
+  margin-bottom: 10px;
+`;
+
+Form.Wrapper = styled.div`
+  padding: 3.5px;
+  maxwidth: "600px";
+  margin: 0 auto;
+`;
+
+const Label = styled.label`
+  display: block;
+  margin-bottom: 5px;
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 20px;
+  color: #101828;
+  font-family: Inter, Open Sans;
+`;
+
+Label.Meta = styled.span`
+  color: #667085;
+  margin-left: 5px;
+  font-family: Inter, Open Sans;
+`;
+
+const ErrorMessage = styled.div`
+  color: red;
+  margin-bottom: 5px;
+  font-size: 12px;
+  font-weight: 400;
+  padding-left: 4px;
+  padding-top: 2px;
+`;
 
-const InputWrapper = styled.input`
-  border-radius: 8px;
-  border: 1px solid var(--k300, #d0d5dd);
-  background: #fff;
-  outline: none;
-  height: 52px;
+Form.Field.DescriptionMessage = styled.div`
+  font-size: 12px;
+  padding-top: 8px;
+  padding-left: 4px;
+`;
+
+const TextArea = styled.div`
+  position: relative;
   width: 100%;
-  text-indent: 12px;
-  ::placeholder {
-    color: #98a2b3;
-    font-size: 14px;
-    font-style: normal;
-    font-weight: 400;
-    line-height: normal;
+
+  textarea {
+    border-radius: 8px;
+    border: 1px solid
+      ${({ error }) =>
+        error === "true" ? "var(--red-300, #FFA2A2)" : "var(--k300, #d0d5dd)"};
+    background: #fff;
+    outline: none;
+    height: 130px;
+    width: 100%;
+    text-indent: 12px;
+    resize: none;
+
+    :: placeholder {
+      color: #98a2b3;
+      font-size: 14px;
+      font-style: normal;
+      font-weight: 400;
+      line-height: normal;
+      padding-top: 5px;
+      font-family: Inter, Open Sans;
+    }
+  }
+
+  /* Error icon */
+  svg {
+    position: absolute;
+    right: 12px;
+    top: 50%;
+    transform: translateY(-50%);
+    display: ${({ error }) =>
+      error === "true" ? "block" : "none"}; /* Show only if error exists */
   }
 `;
 
@@ -37,20 +139,90 @@ font-weight: 400;
 line-height: normal;
 }
 option {
-  padding: 16px; height: 40px;     font-size: 16px;     background-color: #ffffff;     color: #333333;          &:hover {       background-color: #e0e0e0;     }     &:selected {       background-color: #007bff;       color: white;     }
+  padding: 16px; height: 40px;     
+  font-size: 16px;     
+  background-color: #ffffff;     
+  color: #333333;          
+  &:hover {       background-color: #e0e0e0;     }     
+  &:selected {       background-color: #007bff;       color: white;     }
+`;
+
+const InfoIcon = styled.span`
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 18px;
+  height: 18px;
+  font-size: 12px;
+  font-weight: bold;
+  color: #667085;
+  background-color: #f3f4f6;
+  border-radius: 50%;
+  cursor: pointer;
 
+  &:hover {
+    background-color: #e5e7eb;
+  }
+
+  // Tooltip container
+  &::after {
+    content: attr(data-tooltip); /* Display description */
+    position: absolute;
+    bottom: 150%;
+    left: 150%;
+    transform: translateX(-50%);
+    background-color: #181d27;
+    font-family: "Inter", "Open Sans";
+    font-weight: 400;
+    text-align: center;
+    white-space: normal;
+    word-wrap: break-word;
+    // max-width: 250px; /* ✅ Ensures proper width */
+    width: 250px;
+
+    color: #fff;
+    font-size: 12px;
+    padding: 6px 10px;
+    border-radius: 8px;
+    opacity: 0;
+    visibility: hidden;
+    transition: opacity 0.2s ease-in-out;
+    z-index: 10;
+  }
+
+  // Tooltip Arrow
+  &::before {
+    content: "";
+    position: absolute;
+    bottom: 140%;
+    left: 50%;
+    transform: translateX(-50%);
+    border-width: 6px;
+    border-style: solid;
+    border-color: #181d27 transparent transparent transparent; /* Creates the arrow */
+    opacity: 0;
+    visibility: hidden;
+    transition: opacity 0.2s ease-in-out;
+  }
+
+  &:hover::after,
+  &:hover::before {
+    opacity: 1;
+    visibility: visible;
+  }
 `;
 
 const InputConverter = ({
   formData,
   conversationId,
   workspace,
-  widgetId,
+  widget,
   setFormSubmit,
   setSourceState,
 }) => {
   const [errors, setErrors] = useState({});
-
+  const endpoint = useContext(EndPointContext)
   // State to hold form data
   const [formValues, setFormValues] = useState(
     Object.fromEntries(
@@ -58,15 +230,6 @@ const InputConverter = ({
     )
   );
 
-
-  const [selectedCountry, setSelectedCountry] = useState({
-    flag: null,
-    country: "select a country",
-  });
-  const [isDropDownOpen, setIsDropDownOpen] = useState(false);
-  const [hoveredCountry, setHoveredCountry] = useState(null);
-  const [searchQuery, setSearchQuery] = useState("");
-  // Handle input changes
   const handleChange = (e) => {
     const { id, value } = e.target;
     setFormValues((prev) => ({
@@ -75,20 +238,22 @@ const InputConverter = ({
     }));
   };
 
-
-
-  console.log("errors obj", Object.values(errors));
-
+  const handleDropChange = (id) => (value) => {
+    setFormValues((prev) => ({
+      ...prev,
+      [id]: value,
+    }));
+  };
 
   const handleSubmit = (e) => {
     e.preventDefault();
-  
+
     const newErrors = {};
-  
+
     formData.form_data.form_template.forEach((field) => {
-      if (field.is_mandatory) { 
+      if (field.is_mandatory) {
         if (field.field_type === "country") {
-          if (selectedCountry.country === "select a country") {
+          if (formValues.SYS_country === "") {
             newErrors[field.field_id] = `${field.name} is required`;
           }
         } else if (!formValues[field.field_id]?.trim()) {
@@ -96,19 +261,22 @@ const InputConverter = ({
         }
       }
     });
-  
+
     if (Object.keys(newErrors).length > 0) {
       setErrors(newErrors);
       return;
     }
-  
+
     setErrors({});
-  
+
     const submittedValues = formData.form_data.form_template.map((field) => ({
       ...field,
-      value: field.field_type === "country" ? selectedCountry.country : formValues[field.field_id],
+      value:
+        field.field_type === "country"
+          ? formValues.SYS_country
+          : formValues[field.field_id],
     }));
-  
+
     const submittedData = {
       form_id: formData.form_data.form_id,
       conversation_id: conversationId,
@@ -120,11 +288,15 @@ const InputConverter = ({
       },
       type: "lead",
     };
-  
+
     axios
-      .post(`https://dev.pagergpt.ai/wgt-hook/${workspace}/${widgetId}/lead`, submittedData, {
-        withCredentials: true,
-      })
+      .post(
+        `${endpoint}/${workspace}/${widget?.id}/lead`,
+        submittedData,
+        {
+          withCredentials: true,
+        }
+      )
       .then((res) => {
         setSourceState(res.data.source_id);
       })
@@ -133,223 +305,170 @@ const InputConverter = ({
       });
   };
 
+  const updateFieldValue = (field, value) => {
+    setFormValues((prev) => ({
+      ...prev,
+      [field]: value,
+    }));
+  };
 
-  const filteredCountries = countries.filter((country) =>
-  country.name.toLowerCase().includes(searchQuery.toLowerCase())
-);
-  
-  const handleSelectDropdown = (flag, country) => {
-  setSelectedCountry({ flag, country });
-  setIsDropDownOpen(false);
-
-  // Update formValues with the selected country
-  setFormValues((prev) => ({
-    ...prev,
-    SYS_country: country, // Adjust this based on your actual field_id
-  }));
-};
   return (
-    <div style={{ padding: "20px", maxWidth: "600px", margin: "0 auto" }}>
-      <form onSubmit={handleSubmit} style={{marginTop: "5px"}}>
+    <Form.Wrapper
+      style={{ padding: "3.5px", maxWidth: "600px", margin: "0 auto" }}
+    >
+      <Form onSubmit={handleSubmit} style={{ marginTop: "5px" }}>
         {formData.form_data.form_template.map((field) => (
-          <div key={field.id} style={{ marginBottom: "10px" }}>
-            
-            <label
-              htmlFor={field.field_id}
-              style={{ display: "block", marginBottom: "5px", fontSize: "14px", fontWeight: "500", lineHeight:"20px" }}
+          <Form.Field key={field.id} style={{ marginBottom: "10px" }}>
+            <div
+              style={{
+                display: "flex",
+                flexDirection: "row",
+                gap: "10px",
+              }}
             >
-              
-              {field.dispaly_name ? field.dispaly_name : field?.name}
-              {field.is_mandatory && (
-                <span style={{ color: "red", marginLeft: "5px" }}>*</span>
+              <Label htmlFor={field.field_id}>
+                {field.dispaly_name ? field.dispaly_name : field?.name}
+                {!field.is_mandatory ? (
+                  <Label.Meta>(Optional)</Label.Meta>
+                ) : null}
+              </Label>
+              {field.description && (
+                <InfoIcon data-tooltip={field.description}>
+                  <svg
+                    xmlns="
+http://www.w3.org/2000/svg"
+                    viewBox="0 0 24 24"
+                    fill="none"
+                  >
+                    <path
+                      d="M12 11.9999V15.9999M12 8.6249V8.62378M21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12C3 7.02944 7.02944 3 12 3C16.9706 3 21 7.02944 21 12Z"
+                      stroke="currentColor"
+                      strokeWidth="1.7"
+                      strokeLinecap="round"
+                      strokeLinejoin="round"
+                    />
+                  </svg>
+                </InfoIcon>
               )}
-            </label>
-            {errors[field.field_id] && (
-              <div style={{ color: "red", marginBottom: "5px" }}>
-                {errors[field.field_id]}
-              </div>
-            )}
+            </div>
+
             {field.field_type === "long_text" ? (
-              <textarea
-                id={field.field_id}
-                placeholder={field.placeholder}
-                value={formValues[field.field_id]}
-                onChange={handleChange}
-                style={{
-                  borderRadius: "8px",
-                  border: "1px solid var(--k300, #D0D5DD)",
-                  background: "#FFF",
-                  outline: "none",
-                  height: "130px",
-                  width: "100%",
-                }}
-              ></textarea>
-            ) : field.field_type === "country" ? (
-              // <SelectWrapper
-              //   id={field.field_id}
-              //   // required={field.is_mandatory}
-              //   value={formValues[field.field_id]}
-              //   onChange={handleChange}
-              //   style={{
-              //     width: "100%",
-              //     padding: "8px",
-              //     border: "1px solid #ccc",
-              //     borderRadius: "4px",
-              //   }}
-              // >
-              //   <option value="">Select a country</option>
-              //   {countries.map((country) => (
-              //     <option style={{height: "40px"}} key={country.name} value={country.name}>
-              //       {country.flag} {country.name}
-              //     </option>
-              //   ))}
-              // </SelectWrapper>
-              <div
-                style={{
-                  width: "100%",
-                  position: "relative",
-                }}
-              >
-                <span
-                  style={{
-                    borderRadius: "8px",
-                    border: "1px solid var(--k300, #D0D5DD)",
-                    background: "#FFF",
-                    padding: "10px 35px 10px 2px",
-                    cursor: "pointer",
-                    width: "91%",
-                    height: "15px",
-                    display: "flex",
-                    justifyContent: "space-between",
-                    alignItems: "center",
-                  }}
-                  onClick={() => setIsDropDownOpen(!isDropDownOpen)}
-                >
-                  {selectedCountry.flag && selectedCountry.flag} &nbsp;{" "}
-                  {selectedCountry.country}{" "}
-                  <span style={{ rotate: isDropDownOpen ? "180deg" : "0deg" }}>
-                    <svg
-                      xmlns="http://www.w3.org/2000/svg"
-                      width="28"
-                      height="28"
-                      viewBox="0 0 20 20"
-                      fill="none"
-                    >
+              <>
+                <TextArea error={errors[field.field_id] ? "true" : "false"}>
+                  <textarea
+                    id={field.field_id}
+                    placeholder={field.placeholder}
+                    value={formValues[field.field_id]}
+                    onChange={handleChange}
+                  />
+                  <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    width="16"
+                    height="16"
+                    viewBox="0 0 16 16"
+                    fill="none"
+                  >
+                    <g clipPath="url(#clip0_679_4913)">
                       <path
-                        d="M6.66675 8.45312C7.5518 9.67136 8.58931 10.7625 9.75185 11.6983C9.89789 11.8158 10.1023 11.8158 10.2483 11.6983C11.4109 10.7625 12.4484 9.67136 13.3334 8.45312"
-                        stroke="#344054"
-                        stroke-width="1.4"
-                        stroke-linecap="round"
-                        stroke-linejoin="round"
+                        d="M7.99967 5.33337V8.00004M7.99967 10.6667H8.00634M14.6663 8.00004C14.6663 11.6819 11.6816 14.6667 7.99967 14.6667C4.31778 14.6667 1.33301 11.6819 1.33301 8.00004C1.33301 4.31814 4.31778 1.33337 7.99967 1.33337C11.6816 1.33337 14.6663 4.31814 14.6663 8.00004Z"
+                        stroke="#FB2C36"
+                        strokeWidth="1.33333"
+                        strokeLinecap="round"
+                        strokeLinejoin="round"
                       />
-                    </svg>
-                  </span>
-                </span>
-                {isDropDownOpen && (
-                  <div
-                    style={{
-                      display: "flex",
-                      flexDirection: "column",
-                      gap: "8px",
-                      border: "1px solid #cbc8c8fa",
-                      padding: "12px 6px",
-                      position: "absolute",
-                      width: "96%",
-                      top: "38px",
-                      background: "white",
-                      borderRadius: "12px",
-                      left: "0px",
-                      height: "200px",
-                      overflowY: "scroll",
-                    }}
+                    </g>
+                    <defs>
+                      <clipPath id="clip0_679_4913">
+                        <rect width="16" height="16" fill="white" />
+                      </clipPath>
+                    </defs>
+                  </svg>
+                </TextArea>
+                {errors[field.field_id] ? (
+                  <ErrorMessage>{errors[field.field_id]}</ErrorMessage>
+                ) : null}
+              </>
+            ) : field.field_type === "country" ? (
+              <>
+                <Dropdown
+                  error={errors[field.field_id] ? "true" : "false"}
+                  updateFieldValue={updateFieldValue}
+                  fieldId={"SYS_country"}
+                />
+                {errors[field.field_id] ? (
+                  <ErrorMessage>{errors[field.field_id]}</ErrorMessage>
+                ) : null}
+              </>
+            ) : (
+              <>
+                <InputWrapper error={errors[field.field_id] ? "true" : "false"}>
+                  <input
+                    id={field.field_id}
+                    type={
+                      field.field_type === "short_text"
+                        ? "text"
+                        : field.field_type
+                    }
+                    placeholder={field.placeholder}
+                    value={formValues[field.field_id]}
+                    onChange={handleChange}
+                  />
+                  <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    width="16"
+                    height="16"
+                    viewBox="0 0 16 16"
+                    fill="none"
                   >
-                    {/* Search input inside dropdown */}
-                    <input
-                      type="text"
-                      placeholder="Search country..."
-                      value={searchQuery}
-                      onChange={(e) => setSearchQuery(e.target.value)}
-                      style={{
-                        width: "95%",
-                        padding: "8px",
-                        marginBottom: "8px",
-                        border: "1px solid #D0D5DD",
-                        borderRadius: "8px",
-                        outline: "none",
-                      }}
-                    />
+                    <g clipPath="url(#clip0_679_4913)">
+                      <path
+                        d="M7.99967 5.33337V8.00004M7.99967 10.6667H8.00634M14.6663 8.00004C14.6663 11.6819 11.6816 14.6667 7.99967 14.6667C4.31778 14.6667 1.33301 11.6819 1.33301 8.00004C1.33301 4.31814 4.31778 1.33337 7.99967 1.33337C11.6816 1.33337 14.6663 4.31814 14.6663 8.00004Z"
+                        stroke="#FB2C36"
+                        strokeWidth="1.33333"
+                        strokeLinecap="round"
+                        strokeLinejoin="round"
+                      />
+                    </g>
+                    <defs>
+                      <clipPath id="clip0_679_4913">
+                        <rect width="16" height="16" fill="white" />
+                      </clipPath>
+                    </defs>
+                  </svg>
+                </InputWrapper>
 
-                    {filteredCountries.length > 0 ? (
-                      filteredCountries.map((country, index) => (
-                        <span
-                          key={country.name}
-                          style={{
-                            padding: "8px 8px",
-                            borderRadius: "8px",
-                            cursor: "pointer",
-                            background:
-                              hoveredCountry === index ? "#e9e5e5" : "white",
-                          }}
-                          onClick={() =>
-                            handleSelectDropdown(country.flag, country.name)
-                          }
-                          onMouseOver={() => setHoveredCountry(index)}
-                          onMouseLeave={() => setHoveredCountry(null)}
-                        >
-                          {country.flag} &nbsp; {country.name}
-                        </span>
-                      ))
-                    ) : (
-                      <span style={{ padding: "10px", textAlign: "center" }}>
-                        No results found
-                      </span>
-                    )}
-                  </div>
-                )}
-              </div>
-            ) : 
-            (
-              <InputWrapper
-                id={field.field_id}
-                type={
-                  field.field_type === "short_text" ? "text" : field.field_type
-                }
-                placeholder={field.placeholder}
-                // required={field.is_mandatory}
-                value={formValues[field.field_id]}
-                onChange={handleChange}
-                style={{
-                  borderRadius: "8px",
-                  border: "1px solid var(--k300, #D0D5DD)",
-                  background: "#FFF",
-                  outline: "none",
-                  height: "40px",
-                  width: "100%",
-                }}
-              />
-            )
-            }
-          </div>
+                {errors[field.field_id] ? (
+                  <ErrorMessage>{errors[field.field_id]}</ErrorMessage>
+                ) : null}
+              </>
+            )}
+          </Form.Field>
         ))}
-        <button
-          type="submit"
+
+        <div
           style={{
-            padding: "10px 20px",
-            backgroundColor: "#007BFF",
-            color: "#fff",
-            border: "none",
-            borderRadius: "4px",
-            cursor: "pointer",
-            width: "100%"
+            paddingTop: "16px",
+            borderTop: "1px solid var(--k300, #D0D5DD)",
           }}
         >
-          Submit
-        </button>
-      </form>
-    </div>
+          <button
+            type="submit"
+            style={{
+              padding: "12px 20px",
+              backgroundColor: widget?.accent_color,
+              color: "#fff",
+              border: "none",
+              borderRadius: "8px",
+              cursor: "pointer",
+              width: "100%",
+            }}
+          >
+            Submit
+          </button>
+        </div>
+      </Form>
+    </Form.Wrapper>
   );
 };
 
 export default InputConverter;
-
-