From 71734667d100a3078cb6b4acd736371cde519e71 Mon Sep 17 00:00:00 2001 From: Shaurya Sharma Date: Fri, 4 Apr 2025 04:11:33 +0530 Subject: [PATCH] Bug fixes --- .../WidgetManager/widgets/currencyinput.js | 17 +-- .../Widgets/BaseComponents/hooks/useInput.js | 9 ++ .../Widgets/PhoneCurrency/CountrySelect.jsx | 2 + .../Widgets/PhoneCurrency/CurrencyInput.jsx | 54 +++++--- .../PhoneCurrency/CustomValueContainer.jsx | 9 +- .../Widgets/PhoneCurrency/constants.js | 119 ++++++++++++++++++ .../services/widget-config/currencyinput.js | 17 +-- 7 files changed, 196 insertions(+), 31 deletions(-) diff --git a/frontend/src/AppBuilder/WidgetManager/widgets/currencyinput.js b/frontend/src/AppBuilder/WidgetManager/widgets/currencyinput.js index 4b32ecb7f7..64a8f2df57 100644 --- a/frontend/src/AppBuilder/WidgetManager/widgets/currencyinput.js +++ b/frontend/src/AppBuilder/WidgetManager/widgets/currencyinput.js @@ -72,8 +72,8 @@ export const currencyinputConfig = { validation: { mandatory: { type: 'toggle', displayName: 'Make this field mandatory' }, regex: { type: 'code', displayName: 'Regex', placeholder: '^[a-zA-Z0-9_ -]{3,16}$' }, - minLength: { type: 'code', displayName: 'Min length', placeholder: 'Enter min length' }, - maxLength: { type: 'code', displayName: 'Max length', placeholder: 'Enter max length' }, + minValue: { type: 'code', displayName: 'Min value', placeholder: 'Enter min value' }, + maxValue: { type: 'code', displayName: 'Max value', placeholder: 'Enter max value' }, customRule: { type: 'code', displayName: 'Custom validation', @@ -223,9 +223,12 @@ export const currencyinputConfig = { }, actions: [ { - handle: 'setText', - displayName: 'Set text', - params: [{ handle: 'text', displayName: 'text', defaultValue: 'New text' }], + handle: 'setValue', + displayName: 'Set Value', + params: [ + { handle: 'value', displayName: 'value', defaultValue: '' }, + { handle: 'country', displayName: 'country', defaultValue: '' }, + ], }, { handle: 'clear', @@ -259,8 +262,8 @@ export const currencyinputConfig = { validation: { mandatory: { value: '{{false}}' }, regex: { value: '' }, - minLength: { value: '' }, - maxLength: { value: '' }, + minValue: { value: '' }, + maxValue: { value: '' }, customRule: { value: '' }, }, diff --git a/frontend/src/AppBuilder/Widgets/BaseComponents/hooks/useInput.js b/frontend/src/AppBuilder/Widgets/BaseComponents/hooks/useInput.js index 6bc49f95fa..57260875a2 100644 --- a/frontend/src/AppBuilder/Widgets/BaseComponents/hooks/useInput.js +++ b/frontend/src/AppBuilder/Widgets/BaseComponents/hooks/useInput.js @@ -115,6 +115,15 @@ export const useInput = ({ }); }, [inputType, country]); + useEffect(() => { + if (inputType !== 'currency') return; + setExposedVariable('setValue', async function (value, countryCode = country) { + setInputValue(value); + setCountry(countryCode); + fireEvent('onChange'); + }); + }, [inputType, country]); + useEffect(() => { const exposedVariables = { ...(inputType !== 'phone' && { diff --git a/frontend/src/AppBuilder/Widgets/PhoneCurrency/CountrySelect.jsx b/frontend/src/AppBuilder/Widgets/PhoneCurrency/CountrySelect.jsx index 60b6526554..76422f9356 100644 --- a/frontend/src/AppBuilder/Widgets/PhoneCurrency/CountrySelect.jsx +++ b/frontend/src/AppBuilder/Widgets/PhoneCurrency/CountrySelect.jsx @@ -15,6 +15,7 @@ export const CountrySelect = ({ value, onChange, options, ...rest }) => { showValidationError, computedStyles, darkMode, + filterOption, } = rest; const [menuIsOpen, setMenuIsOpen] = useState(false); const dropdownRef = useRef(null); @@ -110,6 +111,7 @@ export const CountrySelect = ({ value, onChange, options, ...rest }) => { useCustomStyles={true} menuPortalTarget={document.body} isCurrencyInput={isCurrencyInput} + {...(filterOption && { filterOption })} components={{ MenuList: CustomMenuList, Option: (props) => , diff --git a/frontend/src/AppBuilder/Widgets/PhoneCurrency/CurrencyInput.jsx b/frontend/src/AppBuilder/Widgets/PhoneCurrency/CurrencyInput.jsx index 003d48349c..abf7b5397c 100644 --- a/frontend/src/AppBuilder/Widgets/PhoneCurrency/CurrencyInput.jsx +++ b/frontend/src/AppBuilder/Widgets/PhoneCurrency/CurrencyInput.jsx @@ -43,16 +43,17 @@ export const CurrencyInput = (props) => { }; const options = useMemo(() => { - return Object.keys(CurrencyMap).map((country) => ({ - label: `${CurrencyMap[country].prefix} (${CurrencyMap[country].currency})`, - value: country, + return Object.keys(CurrencyMap).map((ele) => ({ + label: `${CurrencyMap[ele].prefix} (${CurrencyMap[ele].currency})`, + value: ele, + country: CurrencyMap[ele].country, })); }, []); const onInputValueChange = (value) => { setExposedVariables({ country: country, - formattedValue: `${CurrencyMap?.[country]?.prefix || ''} ${inputRef.current?.value}`, + formattedValue: `${inputRef.current?.value}`, }); handlePhoneCurrencyInputChange(value); }; @@ -128,11 +129,26 @@ export const CurrencyInput = (props) => { zIndex: 3, }; + useEffect(() => { + if (!isInitialRender.current) { + setCountry(defaultCountry); + } + }, [defaultCountry]); + + useEffect(() => { + if (!isInitialRender.current) { + setExposedVariables({ + country: country, + formattedValue: `${inputRef.current?.value}`, + }); + } + }, [country]); + useEffect(() => { if (isInitialRender.current) { setExposedVariables({ country: country, - formattedValue: `${CurrencyMap?.[country]?.prefix || ''} ${inputRef.current?.value}`, + formattedValue: `${inputRef.current?.value}`, value: value, setCountryCode: (code) => { setCountry(code); @@ -142,14 +158,6 @@ export const CurrencyInput = (props) => { } }, []); - useEffect(() => { - if (!isInitialRender.current) { - setCountry(defaultCountry); - } - }, [defaultCountry]); - - console.log('CurrencyMap?.[country]?.prefix', CurrencyMap?.[country]?.prefix); - return ( <>
{ />
{ + return ( + option.label.toLowerCase().includes(inputValue.toLowerCase()) || + option.data.country.toLowerCase().includes(inputValue.toLowerCase()) + ); + }} computedStyles={computedStyles} showValidationError={showValidationError} darkMode={darkMode} @@ -197,9 +215,10 @@ export const CurrencyInput = (props) => { onChange={(selectedOption) => { if (selectedOption) { setCountry(selectedOption.value); + fireEvent('onChange'); setExposedVariables({ country: selectedOption.value, - formattedValue: `${CurrencyMap?.[selectedOption.value]?.prefix || ''} ${inputRef.current?.value}`, + formattedValue: `${inputRef.current?.value}`, }); } }} @@ -214,7 +233,10 @@ export const CurrencyInput = (props) => { decimalsLimit={decimalPlaces} style={computedStyles} data-ignore-hover={true} - onValueChange={(value) => onInputValueChange(value)} + onValueChange={(newVal) => { + if (newVal === value) return; + onInputValueChange(newVal); + }} prefix={`${CurrencyMap?.[country]?.prefix || ''} `} disabled={disabledState} onBlur={handleBlur} diff --git a/frontend/src/AppBuilder/Widgets/PhoneCurrency/CustomValueContainer.jsx b/frontend/src/AppBuilder/Widgets/PhoneCurrency/CustomValueContainer.jsx index be92850a0b..f58babeed6 100644 --- a/frontend/src/AppBuilder/Widgets/PhoneCurrency/CustomValueContainer.jsx +++ b/frontend/src/AppBuilder/Widgets/PhoneCurrency/CustomValueContainer.jsx @@ -21,7 +21,14 @@ export const CustomValueContainer = ({ getValue, ...props }) => {
) : ( -
+
)} diff --git a/frontend/src/AppBuilder/Widgets/PhoneCurrency/constants.js b/frontend/src/AppBuilder/Widgets/PhoneCurrency/constants.js index cf28505652..d27c7665a8 100644 --- a/frontend/src/AppBuilder/Widgets/PhoneCurrency/constants.js +++ b/frontend/src/AppBuilder/Widgets/PhoneCurrency/constants.js @@ -2,477 +2,596 @@ export const CurrencyMap = { AE: { currency: 'AED', prefix: 'د.إ.‏', + country: 'United Arab Emirates', }, AF: { currency: 'AFN', prefix: '؋', + country: 'Afghanistan', }, AL: { currency: 'ALL', prefix: 'Lek', + country: 'Albania', }, AM: { currency: 'AMD', prefix: 'դր.', + country: 'Armenia', }, AR: { currency: 'ARS', prefix: '$', + country: 'Argentina', }, AU: { currency: 'AUD', prefix: '$', + country: 'Australia', }, AZ: { currency: 'AZN', prefix: 'ман.', + country: 'Azerbaijan', }, BA: { currency: 'BAM', prefix: 'KM', + country: 'Bosnia and Herzegovina', }, BD: { currency: 'BDT', prefix: '৳', + country: 'Bangladesh', }, BG: { currency: 'BGN', prefix: 'лв.', + country: 'Bulgaria', }, BH: { currency: 'BHD', prefix: 'د.ب.‏', + country: 'Bahrain', }, BI: { currency: 'BIF', prefix: 'FBu', + country: 'Burundi', }, BN: { currency: 'BND', prefix: '$', + country: 'Brunei Darussalam', }, BO: { currency: 'BOB', prefix: 'Bs', + country: 'Bolivia', }, BR: { currency: 'BRL', prefix: 'R$', + country: 'Brazil', }, BV: { currency: 'NOK', prefix: 'kr', + country: 'Bouvet Island', }, BW: { currency: 'BWP', prefix: 'P', + country: 'Botswana', }, BY: { currency: 'BYR', prefix: 'BYR', + country: 'Belarus', }, BZ: { currency: 'BZD', prefix: '$', + country: 'Belize', }, CA: { currency: 'CAD', prefix: '$', + country: 'Canada', }, CD: { currency: 'CDF', prefix: 'FrCD', + country: 'Congo, Democratic Republic of the', }, CF: { currency: 'XAF', prefix: 'FCFA', + country: 'Central African Republic', }, CH: { currency: 'CHF', prefix: 'CHF', + country: 'Switzerland', }, CL: { currency: 'CLP', prefix: '$', + country: 'Chile', }, CN: { currency: 'CNY', prefix: 'CN¥', + country: 'China', }, CO: { currency: 'COP', prefix: '$', + country: 'Colombia', }, CR: { currency: 'CRC', prefix: '₡', + country: 'Costa Rica', }, CV: { currency: 'CVE', prefix: 'CV$', + country: 'Cape Verde', }, CZ: { currency: 'CZK', prefix: 'Kč', + country: 'Czech Republic', }, DJ: { currency: 'DJF', prefix: 'Fdj', + country: 'Djibouti', }, DK: { currency: 'DKK', prefix: 'kr', + country: 'Denmark', }, DO: { currency: 'DOP', prefix: 'RD$', + country: 'Dominican Republic', }, DZ: { currency: 'DZD', prefix: 'د.ج.‏', + country: 'Algeria', }, EG: { currency: 'EGP', prefix: 'ج.م.‏', + country: 'Egypt', }, ER: { currency: 'ERN', prefix: 'Nfk', + country: 'Eritrea', }, EU: { currency: 'EUR', prefix: '€', + country: 'European Union', }, ET: { currency: 'ETB', prefix: 'Br', + country: 'Ethiopia', }, GB: { currency: 'GBP', prefix: '£', + country: 'United Kingdom', }, GE: { currency: 'GEL', prefix: 'GEL', + country: 'Georgia', }, GH: { currency: 'GHS', prefix: 'GH₵', + country: 'Ghana', }, GN: { currency: 'GNF', prefix: 'FG', + country: 'Guinea', }, GT: { currency: 'GTQ', prefix: 'Q', + country: 'Guatemala', }, HK: { currency: 'HKD', prefix: '$', + country: 'Hong Kong', }, HN: { currency: 'HNL', prefix: 'L', + country: 'Honduras', }, HR: { currency: 'HRK', prefix: 'kn', + country: 'Croatia', }, HU: { currency: 'HUF', prefix: 'Ft', + country: 'Hungary', }, ID: { currency: 'IDR', prefix: 'Rp', + country: 'Indonesia', }, IL: { currency: 'ILS', prefix: '₪', + country: 'Israel', }, IN: { currency: 'INR', prefix: '₹', + country: 'India', }, IQ: { currency: 'IQD', prefix: 'د.ع.‏', + country: 'Iraq', }, IR: { currency: 'IRR', prefix: '﷼', + country: 'Iran, Islamic Republic of', }, IS: { currency: 'ISK', prefix: 'kr', + country: 'Iceland', }, JM: { currency: 'JMD', prefix: '$', + country: 'Jamaica', }, JO: { currency: 'JOD', prefix: 'د.أ.‏', + country: 'Jordan', }, JP: { currency: 'JPY', prefix: '￥', + country: 'Japan', }, KE: { currency: 'KES', prefix: 'Ksh', + country: 'Kenya', }, KH: { currency: 'KHR', prefix: '៛', + country: 'Cambodia', }, KM: { currency: 'KMF', prefix: 'FC', + country: 'Comoros', }, KR: { currency: 'KRW', prefix: '₩', + country: 'Korea, Republic of', }, KW: { currency: 'KWD', prefix: 'د.ك.‏', + country: 'Kuwait', }, KZ: { currency: 'KZT', prefix: 'тңг.', + country: 'Kazakhstan', }, LB: { currency: 'LBP', prefix: 'ل.ل.‏', + country: 'Lebanon', }, LK: { currency: 'LKR', prefix: 'SL Re', + country: 'Sri Lanka', }, LT: { currency: 'LTL', prefix: 'Lt', + country: 'Lithuania', }, LY: { currency: 'LYD', prefix: 'د.ل.‏', + country: 'Libya', }, MA: { currency: 'MAD', prefix: 'د.م.‏', + country: 'Morocco', }, MD: { currency: 'MDL', prefix: 'MDL', + country: 'Moldova, Republic of', }, MG: { currency: 'MGA', prefix: 'MGA', + country: 'Madagascar', }, MK: { currency: 'MKD', prefix: 'MKD', + country: 'Macedonia, the Former Yugoslav Republic of', }, MM: { currency: 'MMK', prefix: 'K', + country: 'Myanmar', }, MO: { currency: 'MOP', prefix: 'MOP$', + country: 'Macao', }, MU: { currency: 'MUR', prefix: 'MURs', + country: 'Mauritius', }, MX: { currency: 'MXN', prefix: '$', + country: 'Mexico', }, MY: { currency: 'MYR', prefix: 'RM', + country: 'Malaysia', }, MZ: { currency: 'MZN', prefix: 'MTn', + country: 'Mozambique', }, NA: { currency: 'NAD', prefix: 'N$', + country: 'Namibia', }, NG: { currency: 'NGN', prefix: '₦', + country: 'Nigeria', }, NI: { currency: 'NIO', prefix: 'C$', + country: 'Nicaragua', }, NO: { currency: 'NOK', prefix: 'kr', + country: 'Norway', }, NP: { currency: 'NPR', prefix: 'नेरू', + country: 'Nepal', }, NZ: { currency: 'NZD', prefix: '$', + country: 'New Zealand', }, OM: { currency: 'OMR', prefix: 'ر.ع.‏', + country: 'Oman', }, PA: { currency: 'PAB', prefix: 'B/.', + country: 'Panama', }, PE: { currency: 'PEN', prefix: 'S/.', + country: 'Peru', }, PH: { currency: 'PHP', prefix: '₱', + country: 'Philippines', }, PK: { currency: 'PKR', prefix: '₨', + country: 'Pakistan', }, PL: { currency: 'PLN', prefix: 'zł', + country: 'Poland', }, PY: { currency: 'PYG', prefix: '₲', + country: 'Paraguay', }, QA: { currency: 'QAR', prefix: 'ر.ق.‏', + country: 'Qatar', }, RO: { currency: 'RON', prefix: 'RON', + country: 'Romania', }, RS: { currency: 'RSD', prefix: 'дин.', + country: 'Serbia', }, RU: { currency: 'RUB', prefix: '₽', + country: 'Russian Federation', }, RW: { currency: 'RWF', prefix: 'FR', + country: 'Rwanda', }, SA: { currency: 'SAR', prefix: 'ر.س.‏', + country: 'Saudi Arabia', }, SD: { currency: 'SDG', prefix: 'SDG', + country: 'Sudan', }, SE: { currency: 'SEK', prefix: 'kr', + country: 'Sweden', }, SG: { currency: 'SGD', prefix: '$', + country: 'Singapore', }, SJ: { currency: 'NOK', prefix: 'kr', + country: 'Svalbard and Jan Mayen', }, SN: { currency: 'XOF', prefix: 'CFA', + country: 'Senegal', }, SO: { currency: 'SOS', prefix: 'Ssh', + country: 'Somalia', }, SY: { currency: 'SYP', prefix: 'ل.س.‏', + country: 'Syrian Arab Republic', }, TH: { currency: 'THB', prefix: '฿', + country: 'Thailand', }, TN: { currency: 'TND', prefix: 'د.ت.‏', + country: 'Tunisia', }, TO: { currency: 'TOP', prefix: 'T$', + country: 'Tonga', }, TR: { currency: 'TRY', prefix: 'TL', + country: 'Turkey', }, TT: { currency: 'TTD', prefix: '$', + country: 'Trinidad and Tobago', }, TW: { currency: 'TWD', prefix: 'NT$', + country: 'Taiwan, Province of China', }, TZ: { currency: 'TZS', prefix: 'TSh', + country: 'United Republic of Tanzania', }, UA: { currency: 'UAH', prefix: '₴', + country: 'Ukraine', }, UG: { currency: 'UGX', prefix: 'USh', + country: 'Uganda', }, US: { currency: 'USD', prefix: '$', + country: 'United States', }, UY: { currency: 'UYU', prefix: '$', + country: 'Uruguay', }, UZ: { currency: 'UZS', prefix: 'UZS', + country: 'Uzbekistan', }, VE: { currency: 'VEF', prefix: 'Bs.F.', + country: 'Venezuela', }, VN: { currency: 'VND', prefix: '₫', + country: 'Vietnam', }, VU: { currency: 'VUV', prefix: 'VT', + country: 'Vanuatu', }, YE: { currency: 'YER', prefix: 'ر.ي.‏', + country: 'Yemen', }, ZA: { currency: 'ZAR', prefix: 'R', + country: 'South Africa', }, ZM: { currency: 'ZMK', prefix: 'ZK', + country: 'Zambia', }, }; diff --git a/server/src/modules/apps/services/widget-config/currencyinput.js b/server/src/modules/apps/services/widget-config/currencyinput.js index 4b32ecb7f7..64a8f2df57 100644 --- a/server/src/modules/apps/services/widget-config/currencyinput.js +++ b/server/src/modules/apps/services/widget-config/currencyinput.js @@ -72,8 +72,8 @@ export const currencyinputConfig = { validation: { mandatory: { type: 'toggle', displayName: 'Make this field mandatory' }, regex: { type: 'code', displayName: 'Regex', placeholder: '^[a-zA-Z0-9_ -]{3,16}$' }, - minLength: { type: 'code', displayName: 'Min length', placeholder: 'Enter min length' }, - maxLength: { type: 'code', displayName: 'Max length', placeholder: 'Enter max length' }, + minValue: { type: 'code', displayName: 'Min value', placeholder: 'Enter min value' }, + maxValue: { type: 'code', displayName: 'Max value', placeholder: 'Enter max value' }, customRule: { type: 'code', displayName: 'Custom validation', @@ -223,9 +223,12 @@ export const currencyinputConfig = { }, actions: [ { - handle: 'setText', - displayName: 'Set text', - params: [{ handle: 'text', displayName: 'text', defaultValue: 'New text' }], + handle: 'setValue', + displayName: 'Set Value', + params: [ + { handle: 'value', displayName: 'value', defaultValue: '' }, + { handle: 'country', displayName: 'country', defaultValue: '' }, + ], }, { handle: 'clear', @@ -259,8 +262,8 @@ export const currencyinputConfig = { validation: { mandatory: { value: '{{false}}' }, regex: { value: '' }, - minLength: { value: '' }, - maxLength: { value: '' }, + minValue: { value: '' }, + maxValue: { value: '' }, customRule: { value: '' }, },