Feat/integration of news letter and feedback menu (#194)

* Add feedback widget and modal for user feedback submission

- Introduced a feedback button in the footer that opens a modal for users to submit feedback.
- Created a feedback modal with tabs for different feedback types (Issue, Idea, Other).
- Implemented JavaScript functionality to handle modal opening, closing, and form submission.
- Added SVG icon for the feedback button.
- Styled the feedback modal and button using Tailwind CSS classes.
- Included error handling for feedback submission failures.
- Ensured responsive design for the feedback modal across different screen sizes.

* feat: implement newsletter subscription with reCAPTCHA validation

* feat: add segment related code for the send data to swisspipe

* fix: update placeholder for other

* fix: update capcha related code

---------

Co-authored-by: ktx-monil <[email protected]>

Author: ktx-krupa

overrides/partials/footer.html

@@ -164,7 +164,7 @@
         </form>
         <div
           id="newsletter-toast"
-          class="tw-fixed tw-bottom-5 tw-right-2 tw-transform tw-bg-[#7782FF] tw-text-white tw-p-6 tw-rounded-lg tw-shadow-lg tw-z-50 tw-hidden tw-transition-opacity tw-duration-300"
+          class="tw-fixed tw-bottom-5 tw-right-2 tw-transform tw-bg-[#7782FF] tw-text-white tw-p-6 tw-rounded-lg tw-shadow-lg tw-z-50 tw-hidden tw-transition-opacity tw-duration-300 tw-text-base"
         ></div>
       </div>
 
@@ -284,11 +284,11 @@
         ) {
           recaptchaToken = token;
 
-          // Hide loader, show success state briefly
-          const loader = document.getElementById("newsletter-captcha-loader");
-          if (loader) {
-            loader.style.display = "flex";
-          }
+          // // Hide loader immediately on success
+          // const loader = document.getElementById("newsletter-captcha-loader");
+          // if (loader) {
+          //   loader.style.display = "none";
+          // }
 
           // Auto-submit after reCAPTCHA completion (like Vue component)
           setTimeout(async () => {
@@ -307,8 +307,8 @@
           );
           if (!recaptchaContainer) return;
 
-          // If widget already exists, don't create another one
-          if (recaptchaWidgetId !== null) return;
+          // Clear any existing widget content first
+          recaptchaContainer.innerHTML = "";
 
           try {
             recaptchaWidgetId = window.grecaptcha.render(recaptchaContainer, {
@@ -317,7 +317,10 @@
               "expired-callback": window.onRecaptchaExpired,
               theme: "dark",
             });
-          } catch (error) {}
+          } catch (error) {
+            // If render fails, reset the widget ID
+            recaptchaWidgetId = null;
+          }
         }
 
         // Submit form function (like Vue component)
@@ -334,18 +337,25 @@
             container.classList.add("tw-flex");
           }
 
-          // Hide loader when showing reCAPTCHA
+          // Ensure loader is hidden when showing reCAPTCHA
           if (loader) {
             loader.style.display = "none";
           }
 
-          // Wait for DOM update, then render reCAPTCHA
+          // Always try to initialize reCAPTCHA, even if widget exists
           setTimeout(() => {
-            if (
-              recaptchaDiv &&
-              window.grecaptcha &&
-              recaptchaWidgetId === null
-            ) {
+            if (recaptchaDiv && window.grecaptcha) {
+              // Destroy existing widget if it exists
+              if (recaptchaWidgetId !== null) {
+                try {
+                  window.grecaptcha.reset(recaptchaWidgetId);
+                } catch (error) {
+                  // If reset fails, clear the container
+                  recaptchaDiv.innerHTML = "";
+                }
+                recaptchaWidgetId = null;
+              }
+              // Always create a new widget
               initializeRecaptcha();
             }
           }, 100);
@@ -370,6 +380,12 @@
             return;
           }
 
+          // Hide loader during processing
+          const loader = document.getElementById("newsletter-captcha-loader");
+          if (loader) {
+            loader.style.display = "none";
+          }
+
           try {
             isSubmitting = true;
 
@@ -420,16 +436,19 @@
             if (window.grecaptcha && recaptchaWidgetId !== null) {
               try {
                 window.grecaptcha.reset(recaptchaWidgetId);
-                // Clear the container completely
-                const recaptchaDiv = document.getElementById(
-                  "newsletter-recaptcha"
-                );
-                if (recaptchaDiv) {
-                  recaptchaDiv.innerHTML = "";
-                }
-                recaptchaWidgetId = null;
-              } catch (error) {}
+              } catch (error) {
+                // Silent error handling
+              }
+            }
+
+            // Clear the container and reset widget ID
+            const recaptchaDiv = document.getElementById(
+              "newsletter-recaptcha"
+            );
+            if (recaptchaDiv) {
+              recaptchaDiv.innerHTML = "";
             }
+            recaptchaWidgetId = null;
             recaptchaToken = "";
 
             // Analytics tracking
@@ -472,16 +491,19 @@
             if (window.grecaptcha && recaptchaWidgetId !== null) {
               try {
                 window.grecaptcha.reset(recaptchaWidgetId);
-                // Clear the container completely
-                const recaptchaDiv = document.getElementById(
-                  "newsletter-recaptcha"
-                );
-                if (recaptchaDiv) {
-                  recaptchaDiv.innerHTML = "";
-                }
-                recaptchaWidgetId = null;
-              } catch (error) {}
+              } catch (error) {
+                // Silent error handling
+              }
+            }
+
+            // Clear the container and reset widget ID
+            const recaptchaDiv = document.getElementById(
+              "newsletter-recaptcha"
+            );
+            if (recaptchaDiv) {
+              recaptchaDiv.innerHTML = "";
             }
+            recaptchaWidgetId = null;
             recaptchaToken = "";
 
             // GTM error tracking
@@ -817,7 +839,7 @@
                       id="feedback-tab-other"
                       role="tab"
                       aria-selected="false"
-                      data-type="Other"
+                      data-type="Feedback"
                       class="feedback-tab tw-flex tw-items-center tw-gap-2 tw-py-1.5 tw-rounded-md tw-text-xs tw-font-medium tw-transition-all tw-flex-1 tw-justify-center tw-cursor-pointer tw-border tw-border-gray-400 tw-text-gray-600 hover:tw-text-gray-900 hover:tw-bg-gray-100 hover:tw-border-gray-200"
                       style="border: 1px solid gray !important"
                     >