pager-widget 0.2.6 → 0.2.7

package/InputConverter.jsx

@@ -13,10 +13,10 @@ const InputWrapper = styled.div`
     border-radius: 8px;
     border: 1px solid
       ${({ error }) =>
-        error === "true" ? "var(--red-300, #FFA2A2)" : "var(--k300, #d0d5dd)"};
+        error === "true" ? "var(--red-300, #FFA2A2)" : "transparent"};
     background: #fff;
     outline: none;
-    height: 44px;
+    height: 36px;
     width: 100%;
     text-indent: 12px;
     padding-right: 40px; /* Space for icon */
@@ -42,7 +42,7 @@ const InputWrapper = styled.div`
 `;
 
 const Form = styled.form`
-  margin-top: 5px;
+  margin: 0px;
 `;
 
 Form.Field = styled.div`
@@ -50,19 +50,20 @@ Form.Field = styled.div`
 `;
 
 Form.Wrapper = styled.div`
-  padding: 3.5px;
+  padding: 14px 16px 16px 14px;
   maxwidth: "600px";
   margin: 0 auto;
 `;
 
 const Label = styled.label`
   display: block;
-  margin-bottom: 5px;
+  margin-bottom: 6px;
+  color: #314158;
   font-size: 14px;
-  font-weight: 400;
+  font-style: normal;
+  font-weight: 600;
   line-height: 20px;
-  color: #101828;
-  font-family: Inter, Open Sans;
+  font-family: "Inter", "Open Sans";
 `;
 
 Label.Meta = styled.span`
@@ -94,13 +95,18 @@ const TextArea = styled.div`
     border-radius: 8px;
     border: 1px solid
       ${({ error }) =>
-        error === "true" ? "var(--red-300, #FFA2A2)" : "var(--k300, #d0d5dd)"};
+        error === "true" ? "var(--red-300, #FFA2A2)" : "transparent"};
     background: #fff;
     outline: none;
     height: 130px;
     width: 100%;
     text-indent: 12px;
-    resize: none;
+    font-size: 14px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: normal;
+    padding-top: 5px;
+    font-family: Inter, Open Sans;
 
     :: placeholder {
       color: #98a2b3;
@@ -108,7 +114,6 @@ const TextArea = styled.div`
       font-style: normal;
       font-weight: 400;
       line-height: normal;
-      padding-top: 5px;
       font-family: Inter, Open Sans;
     }
   }
@@ -151,6 +156,7 @@ const InfoIcon = styled.span`
   position: relative;
   display: inline-flex;
   align-items: center;
+  margin-top: 2px;
   justify-content: center;
   width: 18px;
   height: 18px;
@@ -222,7 +228,7 @@ const InputConverter = ({
   setSourceState,
 }) => {
   const [errors, setErrors] = useState({});
-  const endpoint = useContext(EndPointContext)
+  const endpoint = useContext(EndPointContext);
   // State to hold form data
   const [formValues, setFormValues] = useState(
     Object.fromEntries(
@@ -233,8 +239,7 @@ const InputConverter = ({
   // const handleChange = (e) => {
   //   const { id, value } = e.target;
   //   const newErrors = {};
-   
-    
+
   //   setFormValues((prev) => ({
   //     ...prev,
   //     [id]: value,
@@ -258,9 +263,8 @@ const InputConverter = ({
   //   }
 
   //   setErrors({});
-  
-  // };
 
+  // };
 
   // const handleChange = (e) => {
   //   const { id, value } = e.target;
@@ -269,9 +273,7 @@ const InputConverter = ({
   //     ...prev,
   //     [id]: value,
   //   }));
-  
-    
-  
+
   //   formData.form_data.form_template.forEach((field) => {
   //     if (field.is_mandatory) {
   //       if (field.field_type === "country") {
@@ -283,20 +285,20 @@ const InputConverter = ({
   //       }
   //     }
   //   });
-  
+
   //   setErrors(newErrors);
   // };
   // const handleChange = (e) => {
   //   const { id, value } = e.target;
-  
+
   //   setFormValues((prev) => ({
   //     ...prev,
   //     [id]: value,
   //   }));
-  
+
   //   // Validate all fields, not just the changed one
   //   const newErrors = {};
-    
+
   //   formData.form_data.form_template.forEach((field) => {
   //     if (field.is_mandatory) {
   //       if (field.field_type === "country") {
@@ -310,28 +312,31 @@ const InputConverter = ({
   //       }
   //     }
   //   });
-  
+
   //   setErrors(newErrors);
   // };
-  
 
   const handleChange = (e) => {
     const { id, value } = e.target;
-  
+
     // Update form values
     setFormValues((prev) => ({
       ...prev,
       [id]: value,
     }));
-  
+
     // Re-validate all fields on every change
     setErrors((prevErrors) => {
       const newErrors = { ...prevErrors };
-  
+
       formData.form_data.form_template.forEach((field) => {
         if (field.is_mandatory) {
           if (field.field_type === "country") {
-            if (!formValues.SYS_country && id === "SYS_country" && value === "") {
+            if (
+              !formValues.SYS_country &&
+              id === "SYS_country" &&
+              value === ""
+            ) {
               newErrors[field.field_id] = `${field.name} is required`;
             } else {
               delete newErrors[field.field_id]; // Remove error when field is filled
@@ -349,12 +354,10 @@ const InputConverter = ({
           }
         }
       });
-  
+
       return newErrors;
     });
   };
-  
-  
 
   const handleDropChange = (id) => (value) => {
     setFormValues((prev) => ({
@@ -408,13 +411,9 @@ const InputConverter = ({
     };
 
     axios
-      .post(
-        `${endpoint}/${workspace}/${widget?.id}/lead`,
-        submittedData,
-        {
-          withCredentials: true,
-        }
-      )
+      .post(`${endpoint}/${workspace}/${widget?.id}/lead`, submittedData, {
+        withCredentials: true,
+      })
       .then((res) => {
         setSourceState(res.data.source_id);
       })
@@ -432,16 +431,20 @@ const InputConverter = ({
 
   return (
     <Form.Wrapper
-      style={{ padding: "3.5px", maxWidth: "600px", margin: "0 auto" }}
+      style={{
+        padding: "14px 16px 16px 14px",
+        maxWidth: "600px",
+        margin: "0 auto",
+      }}
     >
-      <Form onSubmit={handleSubmit} style={{ marginTop: "5px" }}>
+      <Form onSubmit={handleSubmit}>
         {formData.form_data.form_template.map((field) => (
           <Form.Field key={field.id} style={{ marginBottom: "10px" }}>
             <div
               style={{
                 display: "flex",
                 flexDirection: "row",
-                gap: "10px",
+                gap: "6px",
               }}
             >
               <Label htmlFor={field.field_id}>