fix: allow-forms for iframe in page header & add id to visible modal

Author: Elessar1802

src/Shared/Components/Header/IframePromoButton.tsx

@@ -1,5 +1,5 @@
 import { useState, useCallback } from 'react'
-import { GenericEmptyState, VisibleModal } from '@Common/index'
+import { GenericEmptyState, stopPropagation, VisibleModal } from '@Common/index'
 import { ComponentSizeType } from '@Shared/constants'
 import ReactGA from 'react-ga4'
 import { ReactComponent as Close } from '@Icons/ic-close.svg'
@@ -25,7 +25,12 @@ export const IframePromoButton = () => {
 
     const renderIframeDrawer = () => (
         <VisibleModal close={onClickCloseIframeModal}>
-            <div className="modal-body--ci-material h-100 dc__overflow-hidden dc__border-left flex column dc__content-space w-100">
+            <div
+                className="modal-body--ci-material h-100 dc__overflow-hidden dc__border-left flex column dc__content-space w-100"
+                // NOTE: needed to prevent closing of modal on body click; clicking outside this div
+                // will close the modal (outside click handled)
+                onClick={stopPropagation}
+            >
                 <div className="trigger-modal__header w-100">
                     <h1 className="modal__title flex left fs-16 fw-6-imp" data-testid="app-details-url-heading">
                         {FEATURE_PROMO_EMBEDDED_MODAL_TITLE || FEATURE_PROMO_EMBEDDED_BUTTON_TEXT}
@@ -48,7 +53,8 @@ export const IframePromoButton = () => {
                         width="100%"
                         height="100%"
                         className="dc__no-border"
-                        sandbox="allow-same-origin allow-scripts"
+                        // NOTE: allow-forms is required to enable submitting the form
+                        sandbox="allow-same-origin allow-scripts allow-forms"
                         referrerPolicy="no-referrer"
                     />
                 ) : (