From 4a7c5b3945a68d416dcac2f52da5037c4ff9fc8c Mon Sep 17 00:00:00 2001
From: Glauber Silva <glauber.silva@givewp.com>
Date: Tue, 16 Apr 2024 15:37:31 -0300
Subject: [PATCH] refactor: change timeout and simplify logic

---
 .../registrars/templates/fields/Phone.tsx     | 30 ++++++++-----
 .../src/blocks/fields/phone/Edit.tsx          | 42 ++++++++-----------
 2 files changed, 37 insertions(+), 35 deletions(-)

diff --git a/src/DonationForms/resources/registrars/templates/fields/Phone.tsx b/src/DonationForms/resources/registrars/templates/fields/Phone.tsx
index bda435b904..167ec114bd 100644
--- a/src/DonationForms/resources/registrars/templates/fields/Phone.tsx
+++ b/src/DonationForms/resources/registrars/templates/fields/Phone.tsx
@@ -30,22 +30,26 @@ export default function Phone({
             return;
         }
         const isFormBuilderPreview = window.location.href.indexOf('about:srcdoc') > -1;
-        console.log('isFormBuilderPreview: ', isFormBuilderPreview);
-        setTimeout(
+        const interval = setTimeout(
             () => {
-                iti = intlTelInput(intlTelInputRef.current, {
+                const options = {
                     utilsScript: intlTelInputSettings.utilsScriptUrl,
                     initialCountry: intlTelInputSettings.initialCountry,
                     showSelectedDialCode: intlTelInputSettings.showSelectedDialCode,
                     strictMode: intlTelInputSettings.strictMode,
                     i18n: intlTelInputSettings.i18n,
-                    /**
-                     * Control when the country list appears as a fullscreen popup vs an inline dropdown. By default,
-                     * it will appear as a fullscreen popup on mobile devices. However, in the form builder preview
-                     * it always load the country list in full scree, so we need set it to "false" to prevent this.
-                     */
-                    useFullscreenPopup: !isFormBuilderPreview,
-                });
+                };
+
+                /**
+                 * Control when the country list appears as a fullscreen popup vs an inline dropdown. By default, it will
+                 * appear as a fullscreen popup on mobile devices. However, in the form builder preview it always load the
+                 * country list in full screen, so we need set it to "false" to prevent this behaviour.
+                 */
+                if (isFormBuilderPreview) {
+                    options['useFullscreenPopup'] = false;
+                }
+
+                iti = intlTelInput(intlTelInputRef.current, options);
 
                 const handleIntlTelInputChange = (event) => {
                     const number = iti.getNumber();
@@ -62,8 +66,12 @@ export default function Phone({
                 intlTelInputRef.current.addEventListener('change', handleIntlTelInputChange);
                 intlTelInputRef.current.addEventListener('keyup', handleIntlTelInputChange);
             },
-            isFormBuilderPreview ? 1000 : 0 // It's necessary to fix the missing placeholder in the form preview
+            isFormBuilderPreview ? 100 : 0 // It's necessary to properly load the utilsScript in the form builder preview
         );
+
+        return () => {
+            clearInterval(interval);
+        };
     }, []);
 
     return (
diff --git a/src/FormBuilder/resources/js/form-builder/src/blocks/fields/phone/Edit.tsx b/src/FormBuilder/resources/js/form-builder/src/blocks/fields/phone/Edit.tsx
index dc550fd8ba..122a997b77 100644
--- a/src/FormBuilder/resources/js/form-builder/src/blocks/fields/phone/Edit.tsx
+++ b/src/FormBuilder/resources/js/form-builder/src/blocks/fields/phone/Edit.tsx
@@ -1,43 +1,37 @@
 import classnames from 'classnames';
 import {BlockEditProps} from '@wordpress/blocks';
 import {BaseControl, PanelBody, PanelRow, TextControl, ToggleControl} from '@wordpress/components';
-import {useEffect} from 'react';
+import {useEffect, useRef} from 'react';
 import {getFormBuilderWindowData} from '@givewp/form-builder/common/getWindowData';
 import {__} from '@wordpress/i18n';
+import intlTelInput from 'intl-tel-input';
+import 'intl-tel-input/build/css/intlTelInput.css';
 import {InspectorControls} from '@wordpress/block-editor';
 
 /**
  * @unreleased
  */
 export default function Edit({attributes: {label, required}, setAttributes}: BlockEditProps<any>) {
-    const intlTelInputId: string = 'give-form-builder-phone-input';
+    const intlTelInputRef = useRef(null);
 
     useEffect(() => {
         const {intlTelInputSettings} = getFormBuilderWindowData();
 
-        const css = document.createElement('link');
-        css.href = intlTelInputSettings.cssUrl;
-        css.rel = 'stylesheet';
-        document.body.appendChild(css);
-
-        const script = document.createElement('script');
-        script.src = intlTelInputSettings.scriptUrl;
-        script.async = true;
-        script.onload = () => {
-            // @ts-ignore
-            window.intlTelInput(document.querySelector('#' + intlTelInputId), {
-                showSelectedDialCode: intlTelInputSettings.showSelectedDialCode,
-                strictMode: intlTelInputSettings.strictMode,
-                utilsScript: intlTelInputSettings.utilsScriptUrl,
-                initialCountry: intlTelInputSettings.initialCountry,
-                i18n: intlTelInputSettings.i18n,
-            });
-        };
-        document.body.appendChild(script);
+        const interval = setTimeout(
+            () => {
+                intlTelInput(intlTelInputRef.current, {
+                    utilsScript: intlTelInputSettings.utilsScriptUrl,
+                    initialCountry: intlTelInputSettings.initialCountry,
+                    showSelectedDialCode: intlTelInputSettings.showSelectedDialCode,
+                    strictMode: intlTelInputSettings.strictMode,
+                    i18n: intlTelInputSettings.i18n,
+                });
+            },
+            100 // It's necessary to properly load the utilsScript in the form builder
+        );
 
         return () => {
-            document.body.removeChild(css);
-            document.body.removeChild(script);
+            clearInterval(interval);
         };
     }, []);
 
@@ -45,7 +39,7 @@ export default function Edit({attributes: {label, required}, setAttributes}: Blo
         <>
             <div className={classnames({'give-is-required': required})}>
                 <BaseControl id={'give-form-builder-phone-label'} label={label}>
-                    <input id={intlTelInputId} type="text" />
+                    <input ref={intlTelInputRef} type="text" />
                 </BaseControl>
             </div>