pager-widget 0.2.0 → 0.2.1

package/InputConverter.jsx

@@ -41,10 +41,14 @@ option {
 
 `;
 
-const InputConverter = ({ formData, conversationId,workspace, widgetId, setFormSubmit, setSourceState }) => {
-
-  
-  
+const InputConverter = ({
+  formData,
+  conversationId,
+  workspace,
+  widgetId,
+  setFormSubmit,
+  setSourceState,
+}) => {
   const [errors, setErrors] = useState({});
 
   // State to hold form data
@@ -53,9 +57,15 @@ const InputConverter = ({ formData, conversationId,workspace, widgetId, setFormS
       formData.form_data.form_template.map((field) => [field.field_id, ""])
     )
   );
-  const [selectedCountry, setSelectedCountry] = useState({flag:null,country:"select a country"})
-  const [isDropDownOpen, setIsDropDownOpen] = useState(false)
-  const [hoveredCountry, setHoveredCountry] = useState(null)
+
+
+  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;
@@ -65,82 +75,91 @@ const InputConverter = ({ formData, conversationId,workspace, widgetId, setFormS
     }));
   };
 
-  // Handle form submission
+
+
+  console.log("errors obj", Object.values(errors));
+
+
   const handleSubmit = (e) => {
     e.preventDefault();
-
+  
     const newErrors = {};
-    formData.form_data.form_template.map((field) => {
-   
-      if (field.is_mandatory && field.field_type == "country"? selectedCountry.country =="select a country"?true:false: !formValues[field.field_id]) {
-        newErrors[field.field_id] = "This field is required.";
-      }
-      
-      if (Object.keys(newErrors).length > 0) {
-        setErrors(newErrors);
-        return;
-      }
-      setErrors({});
-      // localStorage.setItem("leadform", JSON.stringify({ widget: widgetId, submission: true }));
-      
-      const submittedValues = formData.form_data.form_template.map((field) => ({
-        ...field,
-        value: field.field_type == "country"? selectedCountry.country:formValues[field.field_id], // Attach user input to the corresponding field
-      }));
-      const submittedData = {
-        form_id: formData.form_data.form_id,
-        conversation_id: conversationId,
-        lead_data: {
-          name: formData.form_data.name,
-          fields: submittedValues,
-          ws: formData.form_data.ws,
-          user_consent: true,
-        },
-        type:"lead"
-      };
-     
-     
-      axios
-        .post(
-          // "https://dev.pagergpt.ai/widget/harisw/f54c92b4-27c9-4260-9c02-cd00640e0cb4/",
-          `https://dev.pagergpt.ai/wgt-hook/${workspace}/${widgetId}/lead`,
-          submittedData,
-          {
-            withCredentials: true,
+  
+    formData.form_data.form_template.forEach((field) => {
+      if (field.is_mandatory) { 
+        if (field.field_type === "country") {
+          if (selectedCountry.country === "select a country") {
+            newErrors[field.field_id] = `${field.name} is required`;
           }
-        )
-        .then((res) => {
-          
-      
-          setSourceState(res.data.source_id)
-          
-          
-        })
-        .catch((err) => {
-          setFormSubmit(true)
-      
-        });
-    
+        } else if (!formValues[field.field_id]?.trim()) {
+          newErrors[field.field_id] = `${field.name} is required`;
+        }
+      }
     });
-    
-    // Map form values back to the original structure
+  
+    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],
+    }));
+  
+    const submittedData = {
+      form_id: formData.form_data.form_id,
+      conversation_id: conversationId,
+      lead_data: {
+        name: formData.form_data.name,
+        fields: submittedValues,
+        ws: formData.form_data.ws,
+        user_consent: true,
+      },
+      type: "lead",
+    };
+  
+    axios
+      .post(`https://dev.pagergpt.ai/wgt-hook/${workspace}/${widgetId}/lead`, submittedData, {
+        withCredentials: true,
+      })
+      .then((res) => {
+        setSourceState(res.data.source_id);
+      })
+      .catch((err) => {
+        setFormSubmit(true);
+      });
   };
 
+
+  const filteredCountries = countries.filter((country) =>
+  country.name.toLowerCase().includes(searchQuery.toLowerCase())
+);
+  
   const handleSelectDropdown = (flag, country) => {
-    setSelectedCountry({flag,country})
-    setIsDropDownOpen(false)
-  }
+  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" }}>
-      <h2>{formData.form_data.name}</h2>
-      <form onSubmit={handleSubmit}>
+      <form onSubmit={handleSubmit} style={{marginTop: "5px"}}>
         {formData.form_data.form_template.map((field) => (
-          <div key={field.id} style={{ marginBottom: "15px" }}>
+          <div key={field.id} style={{ marginBottom: "10px" }}>
+            
             <label
               htmlFor={field.field_id}
-              style={{ display: "block", marginBottom: "5px" }}
+              style={{ display: "block", marginBottom: "5px", fontSize: "14px", fontWeight: "500", lineHeight:"20px" }}
             >
-              {field.display_name}
+              
+              {field.dispaly_name ? field.dispaly_name : field?.name}
               {field.is_mandatory && (
                 <span style={{ color: "red", marginLeft: "5px" }}>*</span>
               )}
@@ -154,7 +173,6 @@ const InputConverter = ({ formData, conversationId,workspace, widgetId, setFormS
               <textarea
                 id={field.field_id}
                 placeholder={field.placeholder}
-                // required={field.is_mandatory}
                 value={formValues[field.field_id]}
                 onChange={handleChange}
                 style={{
@@ -162,7 +180,7 @@ const InputConverter = ({ formData, conversationId,workspace, widgetId, setFormS
                   border: "1px solid var(--k300, #D0D5DD)",
                   background: "#FFF",
                   outline: "none",
-                  height: "52px",
+                  height: "130px",
                   width: "100%",
                 }}
               ></textarea>
@@ -186,57 +204,111 @@ const InputConverter = ({ formData, conversationId,workspace, widgetId, setFormS
               //     </option>
               //   ))}
               // </SelectWrapper>
-              <div style={{
-                width:"100%",
-                position:"relative",
-
-              }}>
-                <span style={{
-                  borderRadius: "8px",
-                  border: "1px solid var(--k300, #D0D5DD)",
-                  background: "#FFF",
-                  padding:"10px 16px",
-                  cursor:"pointer",
-                  width: "91%",
-                  display: "flex",
-                  justifyContent:"space-between",
-                  alignItems:"center"
-                  
+              <div
+                style={{
+                  width: "100%",
+                  position: "relative",
                 }}
-                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">
-                <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"/>
-                </svg></span></span>
-                {isDropDownOpen && <div style={{
-                  display:"flex",
-                  flexDirection:"column",
-                  gap:"8px",
-                  border:"1px solid #cbc8c8fa",
-                  padding: "12px 6px",
-                  position:"absolute",
-                    width:"96%",
-                    bottom:"84px",
-                    background:"white",
-                    borderRadius:"12px",
-                    left:"0px",
-                    height:"150px",
-                    overflowY:"scroll"
-                }}>
-                {countries &&countries.map((country,index)=>(
-                  <span style={{
-                    padding:"12px 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>
-                ))}
-                </div>}
-                
+              >
+                <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"
+                    >
+                      <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"
+                      />
+                    </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",
+                    }}
+                  >
+                    {/* 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",
+                      }}
+                    />
+
+                    {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={
@@ -246,16 +318,17 @@ const InputConverter = ({ formData, conversationId,workspace, widgetId, setFormS
                 // 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: "52px",
-                //   width: "100%",
-                // }}
+                style={{
+                  borderRadius: "8px",
+                  border: "1px solid var(--k300, #D0D5DD)",
+                  background: "#FFF",
+                  outline: "none",
+                  height: "40px",
+                  width: "100%",
+                }}
               />
-            )}
+            )
+            }
           </div>
         ))}
         <button
@@ -267,6 +340,7 @@ const InputConverter = ({ formData, conversationId,workspace, widgetId, setFormS
             border: "none",
             borderRadius: "4px",
             cursor: "pointer",
+            width: "100%"
           }}
         >
           Submit
@@ -278,164 +352,4 @@ const InputConverter = ({ formData, conversationId,workspace, widgetId, setFormS
 
 export default InputConverter;
 
-// import React, { useState } from "react";
-// import { countries } from "country-codes-flags-phone-codes";
-// import axios from "axios";
-
-// console.log("country", countries);
-// const InputConverter = ({ formData, conversationId }) => {
-//   const [errors, setErrors] = useState({});
-//   // State to hold form data
-//   const [formValues, setFormValues] = useState(
-//     Object.fromEntries(
-//       formData.form_data.form_template.map((field) => [field.field_id, ""])
-//     )
-//   );
-
-//   // Handle input changes
-//   const handleChange = (e) => {
-//     const { id, value } = e.target;
-//     setFormValues((prev) => ({
-//       ...prev,
-//       [id]: value,
-//     }));
-//   };
-
-//   // Handle form submission
-//   const handleSubmit = (e) => {
-//     e.preventDefault();
-
-//     const newErrors = {};
-//     formData.form_data.form_template.map((field) => {
-//       console.log("fields",field.is_mandatory,formValues[field.field_id])
-//       if (field.is_mandatory && !formValues[field.field_id]) {
-//         newErrors[field.field_id] = "This field is required.";
-//       }
-//       if (Object.keys(newErrors).length > 0) {
-//         setErrors(newErrors);
-//         return;
-//       }
-//       setErrors({});
-//        const submittedValues = formData.form_data.form_template.map((field) => ({
-//       ...field,
-//       value: formValues[field.field_id], // Attach user input to the corresponding field
-//     }));
-//     const submittedData = {
-//       form_id: formData.form_data.form_id,
-//       conversation_id: conversationId,
-//       lead_data: {
-//         name: formData.form_data.name,
-//         fields: submittedValues,
-//         ws: formData.form_data.ws,
-//         user_consent: true,
-//       },
-//     };
-//     axios.post('https://dev.pagergpt.ai/widget/harisw/f54c92b4-27c9-4260-9c02-cd00640e0cb4/',submittedData).then((res)=>{
-//     console.log("Form Submitted", submittedData);
-//     })
-//     .catch((err)=> {
-//       console.log("error submitting form", err)
-//     })
-    
-//     });
-   
-//     // Map form values back to the original structure
-   
-//   };
-
-//   console.log("errors", errors);
-//   return (
-//     <div style={{ padding: "20px", maxWidth: "600px", margin: "0 auto" }}>
-     
-//       <h2>{formData.form_data.name}</h2>
-//       <form onSubmit={handleSubmit}>
-//         {formData.form_data.form_template.map((field) => (
-//           <div key={field.id} style={{ marginBottom: "15px" }}>
-//             <label
-//               htmlFor={field.field_id}
-//               style={{ display: "block", marginBottom: "5px" }}
-//             >
-//               {field.display_name}
-//               {field.is_mandatory && (
-//                 <span style={{ color: "red", marginLeft: "5px" }}>*</span>
-//               )}
-//             </label>
-//             {errors[field.field_id] && (
-//               <div style={{ color: "red", marginBottom: "5px" }}>
-//                 {errors[field.field_id]}
-//               </div>
-//             )}
-//             {field.field_type === "long_text" ? (
-//               <textarea
-//                 id={field.field_id}
-//                 placeholder={field.placeholder}
-//                 // required={field.is_mandatory}
-//                 value={formValues[field.field_id]}
-//                 onChange={handleChange}
-//                 style={{
-//                   width: "100%",
-//                   padding: "8px",
-//                   border: "1px solid #ccc",
-//                   borderRadius: "4px",
-//                   minHeight: "100px",
-//                 }}
-//               ></textarea>
-//             ) : field.field_type === "country" ? (
-//               <select
-//                 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 key={country.name} value={country.name}>
-//                     {country.flag} {country.name}
-//                   </option>
-//                 ))}
-//               </select>
-//             ) : (
-//               <input
-//                 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={{
-//                   width: "100%",
-//                   padding: "8px",
-//                   border: "1px solid #ccc",
-//                   borderRadius: "4px",
-//                 }}
-//               />
-//             )}
-//           </div>
-//         ))}
-//         <button
-//           type="submit"
-//           style={{
-//             padding: "10px 20px",
-//             backgroundColor: "#007BFF",
-//             color: "#fff",
-//             border: "none",
-//             borderRadius: "4px",
-//             cursor: "pointer",
-//           }}
-//         >
-//           Submit
-//         </button>
-//       </form>
-//     </div>
-//   );
-// };
 
-// export default InputConverter;