Intelligent Advisor

Hi Team, @richard-napier1

I am trying to add a text input for International Telephone Input With Flags and Dial Codes

I tried following this https://www.jqueryscript.net/form/jQuery-International-Telephone-Input-With-Flags-Dial-Codes.html

for my code customization

Its currently working/loading properly in my web determinations url after deployment

When i try to host it in my Oracle Service Cloud PHP page css is being overridden somehow . I am using a cdn in my php page to achieve this

this is my php page code

<rn:meta title="Talk to a representative" template="OPAstandard.php" login_required="false" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.8/css/intlTelInput.min.css" />
<?php
// Determine the OPA URL based on the environment
if (strpos($_SERVER['HTTP_HOST'], '--tst.') !== false) {
   $opa_url = "https://xxxx-opa--tst1.custhelp.com/web-determinations";
} elseif (strpos($_SERVER['HTTP_HOST'], '--tst1.') !== false) {
   $opa_url = "https://xxxxx-opa--tst2.custhelp.com/web-determinations";
} elseif (strpos($_SERVER['HTTP_HOST'], 'myanswers.custhelp') !== false) {
   $opa_url = "https://xxxxx-opa.custhelp.com/web-determinations";
}
?>
<div id="rn_PageContent" class="rn_AskQuestion">
   <div class="rn_Padding">
       <rn:widget path="custom/opa/OPAWidget" policy_model="talktoarepresentative" web_determinations_url="#rn:php:$opa_url#" />
   </div>
</div>
<!-- Include jQuery and intlTelInput scripts -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.8/js/intlTelInput.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.8/js/utils.js"></script>
<!-- JavaScript code to check if libraries and CSS are loaded -->
<script>
   // Check if jQuery is loaded
   console.log("jQuery is", window.jQuery ? "loaded" : "not loaded");
   // Check if intlTelInput is loaded
   console.log("intlTelInput is", window.intlTelInput ? "loaded" : "not loaded");
   // Check if utils.js (intlTelInputUtils) is loaded
   console.log("utils.js is", window.intlTelInputUtils ? "loaded" : "not loaded");
</script>

and this is my countrycode.js custom style code

// Constants for URLs
const ITI_CSS_URL = "https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.8/css/intlTelInput.css";
const ITI_JS_URL = "https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.8/js/intlTelInput.min.js";
const UTILS_JS_URL = "https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.8/js/utils.js";
OraclePolicyAutomation.AddExtension({
   customLabel: function (control, interview) {
       if (control.getProperty('type') === 'custom-countrycode') {
           return renderCountryCodeInput(control, interview);
       }
   }
});
function renderCountryCodeInput(control, interview) {
   // Create container
   const container = document.createElement("div");
   // Create input field
   const input = createInputElement(control);
   
   // Append input field to the container
   container.appendChild(input);
   // Load CSS
   loadCSS(ITI_CSS_URL);
   // Initialize intl-tel-input when scripts are loaded
   loadScripts([ITI_JS_URL, UTILS_JS_URL], () => {
       initializeIntlTelInput(input, control, interview);
   });
   return {
       mount: function (el) {
           el.appendChild(container);
       }
   };
}
function createInputElement(control) {
   const input = document.createElement("input");
   input.type = "tel";
   input.id = control.getProperty('id') || 'mobile-number';
   input.placeholder = "Enter phone number...";
   return input;
}
function loadCSS(url) {
   const link = document.createElement("link");
   link.rel = "stylesheet";
   link.type = "text/css";
   link.href = url;
      // Add !important to the style property
   link.style.setProperty('import', 'url(' + url + ') !important');
   document.head.appendChild(link);
}
function loadScripts(urls, callback) {
   let loaded = 0;
   const total = urls.length;
   const scriptLoaded = () => {
       if (++loaded === total && callback) {
           callback();
       }
   };
   urls.forEach(url => {
       const script = document.createElement("script");
       script.type = "text/javascript";
       script.src = url;
       script.onload = scriptLoaded;
       // Error handling for script loading
       script.onerror = () => {
           console.error("Error loading script:", url);
           loaded++; // Increment loaded count to trigger callback if needed
       };
       document.head.appendChild(script);
   });
}
function initializeIntlTelInput(input, control, interview) {
   const iti = window.intlTelInput(input, {
       allowDropdown: true,
       autoPlaceholder: "polite",
       countrySearch: true,
       dropdownContainer: document.body,
       formatAsYouType: true,
       formatOnDisplay: true,
       showSelectedDialCode: false,
       showFlags: true,
       //hiddenInput: control.getProperty('id'),
       initialCountry: "auto",
       nationalMode: false,
       placeholderNumberType: "MOBILE",
       utilsScript: UTILS_JS_URL
   });
   iti.promise.then(() => {
       input.addEventListener('countrychange', () => {
           const countryCode = iti.getSelectedCountryData().dialCode;
           console.log("Selected country code:", countryCode);
           interview.setInputValue('mobile_international', countryCode);
       });
   });
}

Is there any work around or way to mitigate this issue or a simpler way to achieve this functionality of country code picker and have full control in opa