From b3a17ae473d466304dff046791fcd6a7037a138a Mon Sep 17 00:00:00 2001
From: Shaurya Sharma <shaurya064@gmail.com>
Date: Fri, 4 Apr 2025 13:48:31 +0530
Subject: [PATCH] Currency Input fixes added

---
 .../Widgets/PhoneCurrency/CountrySelect.jsx    | 18 +++++++++---------
 .../Widgets/PhoneCurrency/CurrencyInput.jsx    | 13 +++++++------
 .../PhoneCurrency/CustomValueContainer.jsx     | 18 +++++++++++++++---
 3 files changed, 31 insertions(+), 18 deletions(-)

diff --git a/frontend/src/AppBuilder/Widgets/PhoneCurrency/CountrySelect.jsx b/frontend/src/AppBuilder/Widgets/PhoneCurrency/CountrySelect.jsx
index 76422f9356..5f4d1a6efc 100644
--- a/frontend/src/AppBuilder/Widgets/PhoneCurrency/CountrySelect.jsx
+++ b/frontend/src/AppBuilder/Widgets/PhoneCurrency/CountrySelect.jsx
@@ -39,10 +39,14 @@ export const CountrySelect = ({ value, onChange, options, ...rest }) => {
   const customStyles = {
     container: (provided) => ({
       ...provided,
-      minWidth: isCurrencyInput ? '55px' : !isCountryChangeEnabled || disabledState ? '77px' : '87px',
-      width: isCurrencyInput ? '55px' : !isCountryChangeEnabled || disabledState ? '77px' : '87px',
+      minWidth: !isCountryChangeEnabled || disabledState ? '77px' : isCurrencyInput ? '87px' : '93px',
+      width: !isCountryChangeEnabled || disabledState ? '77px' : isCurrencyInput ? '87px' : '93px',
       height: '100%',
     }),
+    valueContainer: (provided) => ({
+      ...provided,
+      padding: '0px',
+    }),
     control: (provided) => ({
       ...provided,
       minHeight: '0px',
@@ -54,13 +58,7 @@ export const CountrySelect = ({ value, onChange, options, ...rest }) => {
       borderColor: `${
         !isValid && showValidationError ? 'var(--status-error-strong)' : computedStyles?.borderColor
       } !important`,
-      backgroundColor: `${
-        isCountryChangeEnabled
-          ? computedStyles?.backgroundColor
-          : darkMode
-          ? 'var(--surfaces-app-bg-default)'
-          : 'var(--surfaces-surface-03)'
-      } !important`,
+      backgroundColor: `${computedStyles?.backgroundColor} !important`,
     }),
     menu: (provided) => ({
       ...provided,
@@ -68,6 +66,7 @@ export const CountrySelect = ({ value, onChange, options, ...rest }) => {
       height: '236px',
       borderRadius: '8px',
       marginTop: '2px',
+      boxShadow: 'var(--elevation-400-box-shadow)',
     }),
     menuList: (provided) => ({
       ...provided,
@@ -111,6 +110,7 @@ export const CountrySelect = ({ value, onChange, options, ...rest }) => {
         useCustomStyles={true}
         menuPortalTarget={document.body}
         isCurrencyInput={isCurrencyInput}
+        isCountryChangeEnabled={isCountryChangeEnabled}
         {...(filterOption && { filterOption })}
         components={{
           MenuList: CustomMenuList,
diff --git a/frontend/src/AppBuilder/Widgets/PhoneCurrency/CurrencyInput.jsx b/frontend/src/AppBuilder/Widgets/PhoneCurrency/CurrencyInput.jsx
index abf7b5397c..786299fc3a 100644
--- a/frontend/src/AppBuilder/Widgets/PhoneCurrency/CurrencyInput.jsx
+++ b/frontend/src/AppBuilder/Widgets/PhoneCurrency/CurrencyInput.jsx
@@ -51,11 +51,11 @@ export const CurrencyInput = (props) => {
   }, []);
 
   const onInputValueChange = (value) => {
+    handlePhoneCurrencyInputChange(value);
     setExposedVariables({
       country: country,
-      formattedValue: `${inputRef.current?.value}`,
+      formattedValue: `${CurrencyMap[country]?.prefix} ${inputRef.current?.value}`,
     });
-    handlePhoneCurrencyInputChange(value);
   };
 
   const {
@@ -139,7 +139,7 @@ export const CurrencyInput = (props) => {
     if (!isInitialRender.current) {
       setExposedVariables({
         country: country,
-        formattedValue: `${inputRef.current?.value}`,
+        formattedValue: `${CurrencyMap[country]?.prefix} ${value}`,
       });
     }
   }, [country]);
@@ -148,7 +148,7 @@ export const CurrencyInput = (props) => {
     if (isInitialRender.current) {
       setExposedVariables({
         country: country,
-        formattedValue: `${inputRef.current?.value}`,
+        formattedValue: `${CurrencyMap[country]?.prefix} ${value}`,
         value: value,
         setCountryCode: (code) => {
           setCountry(code);
@@ -218,7 +218,7 @@ export const CurrencyInput = (props) => {
                 fireEvent('onChange');
                 setExposedVariables({
                   country: selectedOption.value,
-                  formattedValue: `${inputRef.current?.value}`,
+                  formattedValue: `${CurrencyMap[selectedOption.value]?.prefix} ${selectedOption.value}`,
                 });
               }
             }}
@@ -237,7 +237,8 @@ export const CurrencyInput = (props) => {
               if (newVal === value) return;
               onInputValueChange(newVal);
             }}
-            prefix={`${CurrencyMap?.[country]?.prefix || ''} `}
+            // prefix={`${CurrencyMap?.[country]?.prefix || ''} `}
+            prefix={''}
             disabled={disabledState}
             onBlur={handleBlur}
             onFocus={handleFocus}
diff --git a/frontend/src/AppBuilder/Widgets/PhoneCurrency/CustomValueContainer.jsx b/frontend/src/AppBuilder/Widgets/PhoneCurrency/CustomValueContainer.jsx
index f58babeed6..6cea56d47c 100644
--- a/frontend/src/AppBuilder/Widgets/PhoneCurrency/CustomValueContainer.jsx
+++ b/frontend/src/AppBuilder/Widgets/PhoneCurrency/CustomValueContainer.jsx
@@ -4,20 +4,32 @@ import { components } from 'react-select';
 import flags from 'react-phone-number-input/flags';
 import Planet from '@/_ui/Icon/bulkIcons/Planet';
 import { getCountryCallingCodeSafe } from './utils';
+import { CurrencyMap } from './constants';
 
 export const CustomValueContainer = ({ getValue, ...props }) => {
   const selectedValue = getValue()[0];
-  const { isCurrencyInput } = props?.selectProps || {};
+  const country = selectedValue?.value;
+  const { isCurrencyInput, isCountryChangeEnabled } = props?.selectProps || {};
   const FlagIcon = selectedValue ? flags[selectedValue.value] : null;
   const countryCode = getCountryCallingCodeSafe(selectedValue.value);
 
   return (
     <components.ValueContainer {...props}>
       {FlagIcon ? (
-        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', width: '100%' }}>
+        <div
+          style={{
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            width: '100%',
+            marginLeft: isCountryChangeEnabled ? '4px' : '0px',
+          }}
+        >
           <>
             <FlagIcon style={{ height: '16px' }} />{' '}
-            <span style={{ marginLeft: '2px' }}>{!isCurrencyInput && ` +${countryCode}`}</span>
+            <span style={{ marginLeft: '6px' }}>
+              {isCurrencyInput ? ` ${CurrencyMap?.[country]?.prefix}` : ` +${countryCode}`}
+            </span>
           </>
         </div>
       ) : (