pager-widget 0.2.2 → 0.2.4

package/App.jsx

@@ -3329,6 +3329,7 @@ const App = ({
             </ChatContentWrapper>
             </EndPointProvider>
             <Footer
+              sourceState={sourceState}
               {...{ sendMessage, onFileUpload }}
               widget={widget}
               messages={messages}
@@ -3363,6 +3364,7 @@ const App = ({
 };
 
 const Footer = ({
+  sourceState,
   sendMessage,
   widget,
   messages,
@@ -3417,7 +3419,8 @@ const Footer = ({
           </span>
         </p>
       )}
-      <InputMessageChat
+      {console.log("3420", widget)}
+      {sourceState !== "new_user" &&<InputMessageChat
         size={scale.widgetSize}
         className="widget_input_message"
       >
@@ -3477,7 +3480,7 @@ const Footer = ({
             </span>
           </div>
         </div>
-      </InputMessageChat>
+      </InputMessageChat>}
 
       <div className="widget_footer">
         <p>
@@ -3946,6 +3949,7 @@ const ChatHeaderTop = ({ widget, onClick, open, restart, exit, logoshape }) => {
           </IconSpan> */}
           <div
             style={{
+              
               display: "flex",
               gap: "8px",
             }}
@@ -3956,8 +3960,9 @@ const ChatHeaderTop = ({ widget, onClick, open, restart, exit, logoshape }) => {
                 color: `${widget.primary_color}`,
                 background: `${widget.accent_color}`,
                 border: "1px solid white",
-                padding: "10px 15px",
+                padding: "6px 12px",
                 borderRadius: "8px",
+                height: "28px"
               }}
             >
               Restart
@@ -3989,8 +3994,9 @@ const ChatHeaderTop = ({ widget, onClick, open, restart, exit, logoshape }) => {
                 color: `${widget.primary_color}`,
                 background: `${widget.accent_color}`,
                 border: "1px solid white",
-                padding: "10px 15px",
+                padding: "6px 12px",
                 borderRadius: "8px",
+                height: "28px"
               }}
             >
               Exit
@@ -4155,6 +4161,7 @@ const FeedbackBtn = ({
 }) => {
   // const [hovered, setHovered] = useState(false);
   const scale = useScaleContext();
+  console.log("labelll", label)
   return (
     <WidgetUpdateButton>
       <Button
@@ -4212,8 +4219,29 @@ const FeedbackBtn = ({
               strokeLinejoin="round"
             />
           </svg>
-        ) : (
-          <svg
+        ) : null
+    //     (
+    //       <svg
+    //         xmlns="
+    // http://www.w3.org/2000/svg"
+    //         viewBox="0 0 24 24"
+    //         fill="none"
+    //         width="24px"
+    //         height="24px"
+    //       >
+    //         <path
+    //           d="M16 11.0638V12.5C16 13.8807 17.1193 15 18.5 15C19.8807 15 21 13.8807 21 12.5V6.5C21 5.11929 19.8807 4 18.5 4C17.1193 4 16 5.11929 16 6.5V8.26803M16 11.0638C15.9981 11.8772 15.9848 12.3486 15.9004 12.8057C15.812 13.2848 15.6657 13.7513 15.4645 14.1949C15.2378 14.6948 14.9181 15.154 14.2787 16.0725L11.2669 20.3986C11.1903 20.5085 11.1521 20.5634 11.1167 20.6041C10.764 21.0097 10.1537 21.0639 9.73502 20.7268C9.69309 20.6931 9.64573 20.6457 9.55102 20.551C9.38747 20.3874 9.30569 20.3057 9.23586 20.2251C8.55824 19.4437 8.33094 18.3683 8.63439 17.3796C8.66566 17.2777 8.70737 17.1698 8.79074 16.954L8.83852 16.8304C8.97239 16.484 9.03932 16.3108 9.06475 16.1739C9.21585 15.3603 8.67951 14.578 7.86615 14.4256C7.72925 14.4 7.54357 14.4 7.17222 14.4H4.7857C3.82553 14.4 3.34542 14.4 3.00125 14.2049C2.69915 14.0336 2.46584 13.7628 2.34113 13.4387C2.19905 13.0694 2.27007 12.5946 2.4121 11.645L2.94384 8.08995C3.16087 6.63894 3.26938 5.91343 3.62294 5.36807C3.93452 4.88744 4.3772 4.50605 4.89864 4.26899C5.4903 4 6.22388 4 7.69103 4H11.2C12.8802 4 13.7203 4 14.362 4.32698C14.9265 4.6146 15.3854 5.07354 15.673 5.63803C15.9635 6.20815 15.9964 6.93482 16 8.26803M16 11.0638V8.26803"
+    //           stroke="#ED3535"
+    //           strokeWidth="1.7"
+    //           strokeLinecap="round"
+    //           strokeLinejoin="round"
+    //         />
+    //       </svg>
+    //     )
+        }
+        {
+          label === "Not Satisfied"?(
+            <svg
             xmlns="
     http://www.w3.org/2000/svg"
             viewBox="0 0 24 24"
@@ -4229,7 +4257,13 @@ const FeedbackBtn = ({
               strokeLinejoin="round"
             />
           </svg>
-        )}
+          ):null
+        }
+        {
+          label === "Hand over to Live agent"?(
+            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" color="blue" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-hand-coins text-brand-primary w-4 h-4"><path d="M11 15h2a2 2 0 1 0 0-4h-3c-.6 0-1.1.2-1.4.6L3 17"></path><path d="m7 21 1.6-1.4c.3-.4.8-.6 1.4-.6h4c1.1 0 2.1-.4 2.8-1.2l4.6-4.4a2 2 0 0 0-2.75-2.91l-4.2 3.9"></path><path d="m2 16 6 6"></path><circle cx="16" cy="9" r="2.9"></circle><circle cx="6" cy="5" r="3"></circle></svg>
+          ):null
+        }
       </Button>
     </WidgetUpdateButton>
   );
@@ -4244,6 +4278,7 @@ const AiFeedbackButtonsWrapper = ({
   return (
     <ButtonWrapper>
       {options.map(({ label, action }, key) => (
+        
         <FeedbackBtn
           label={label}
           action={action}

package/ConsentPopup.jsx

@@ -193,9 +193,9 @@ console.log("url location", window.location.origin)
 
       }}>
         <button
-        
+          
           disabled={isVisible == false ? true : false}
-          style={{...popupStyles.button, width: "90%", background:widget?.accent_color}}
+          style={{...popupStyles.button, width: "90%", background:isVisible === false ?"#E2E8F0":widget?.accent_color}}
           onClick={handleSubmit}
         >
           Submit

package/Dropdown.jsx

@@ -5,6 +5,7 @@ import styled from "styled-components";
 const DropdownWrapper = styled.div`
   width: 100%;
   position: relative;
+  
 `;
 const DropdownContent = styled.span`
   border-radius: 8px;
@@ -17,7 +18,7 @@ const DropdownContent = styled.span`
   padding: 10px 30px 10px 2px; 
   cursor: pointer;
   width: 91%;
-  height: 30px;
+  height: 24px;
   display: flex;
   justify-content: space-between;
   align-items: center;
@@ -39,7 +40,7 @@ const DropdownList = styled.div`
 `;
 const DropdownInput = styled.input`
   width: 100%;
-  padding-left: 40px;
+  padding-left: 20px;
   border-bottom: 1px solid #d0d5dd;
   outline: none;
   border-top: none;
@@ -47,6 +48,8 @@ const DropdownInput = styled.input`
   border-right: none;
   background: transparent;
   height: 40px;
+  
+ 
 `;
 const DropdownNode = styled.span`
   padding: 8px 8px;
@@ -101,7 +104,7 @@ const Dropdown = ({error,updateFieldValue, fieldId}) => {
         </DropdownContent>
         {isDropDownOpen && (
           <DropdownList>
-            <DropdownInput onChange={(e) => setSearchQuery(e.target.value)} />
+            <DropdownInput onChange={(e) => setSearchQuery(e.target.value)} placeholder="search..." />
             <div
               style={{
                 height: "220px",

package/InputConverter.jsx

@@ -16,7 +16,7 @@ const InputWrapper = styled.div`
         error === "true" ? "var(--red-300, #FFA2A2)" : "var(--k300, #d0d5dd)"};
     background: #fff;
     outline: none;
-    height: 52px;
+    height: 44px;
     width: 100%;
     text-indent: 12px;
     padding-right: 40px; /* Space for icon */
@@ -230,13 +230,131 @@ const InputConverter = ({
     )
   );
 
+  // const handleChange = (e) => {
+  //   const { id, value } = e.target;
+  //   const newErrors = {};
+   
+    
+  //   setFormValues((prev) => ({
+  //     ...prev,
+  //     [id]: value,
+  //   }));
+
+  //   formData.form_data.form_template.forEach((field) => {
+  //     if (field.is_mandatory) {
+  //       if (field.field_type === "country") {
+  //         if (formValues.SYS_country === "") {
+  //           newErrors[field.field_id] = `${field.name} is required`;
+  //         }
+  //       } else if (!formValues[field.field_id]?.trim()) {
+  //         newErrors[field.field_id] = `${field.name} is required`;
+  //       }
+  //     }
+  //   });
+
+  //   if (Object.keys(newErrors).length > 0) {
+  //     setErrors(newErrors);
+  //     return;
+  //   }
+
+  //   setErrors({});
+  
+  // };
+
+
+  // const handleChange = (e) => {
+  //   const { id, value } = e.target;
+  //   const newErrors = {};
+  //   setFormValues((prev) => ({
+  //     ...prev,
+  //     [id]: value,
+  //   }));
+  
+    
+  
+  //   formData.form_data.form_template.forEach((field) => {
+  //     if (field.is_mandatory) {
+  //       if (field.field_type === "country") {
+  //         if (id === "SYS_country" && value === "") {
+  //           newErrors[field.field_id] = `${field.name} is required`;
+  //         }
+  //       } else if (id === field.field_id && !value.trim()) {
+  //         newErrors[field.field_id] = `${field.name} is required`;
+  //       }
+  //     }
+  //   });
+  
+  //   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") {
+  //         if (!formValues.SYS_country && id === "SYS_country" && value === "") {
+  //           newErrors[field.field_id] = `${field.name} is required`;
+  //         }
+  //       } else if (!value.trim() && id === field.field_id) {
+  //         newErrors[field.field_id] = `${field.name} is required`;
+  //       } else if (!formValues[field.field_id]?.trim()) {
+  //         newErrors[field.field_id] = `${field.name} is required`;
+  //       }
+  //     }
+  //   });
+  
+  //   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 === "") {
+              newErrors[field.field_id] = `${field.name} is required`;
+            } else {
+              delete newErrors[field.field_id]; // Remove error when field is filled
+            }
+          } else {
+            if (id === field.field_id) {
+              if (!value.trim()) {
+                newErrors[field.field_id] = `${field.name} is required`;
+              } else {
+                delete newErrors[field.field_id]; // Remove error when field is filled
+              }
+            } else if (!formValues[field.field_id]?.trim()) {
+              newErrors[field.field_id] = `${field.name} is required`;
+            }
+          }
+        }
+      });
+  
+      return newErrors;
+    });
   };
+  
+  
 
   const handleDropChange = (id) => (value) => {
     setFormValues((prev) => ({