Minor fixes and folder structure changes

frontend/ee

@@ -1 +1 @@
-Subproject commit d93ee7e1318f044ef2327671b8b257648071453d
+Subproject commit 715a830c7a8d75efc7f77106292d9e4499005b69

frontend/src/AppBuilder/Widgets/PhoneCurrency/PhoneInput.jsx

@@ -0,0 +1,254 @@
+import React, { useEffect, useMemo, useRef } from 'react';
+// eslint-disable-next-line import/no-unresolved
+import Input, { getCountries, getCountryCallingCode } from 'react-phone-number-input/input';
+import { getCountryCallingCodeSafe } from './utils';
+// eslint-disable-next-line import/no-unresolved
+import en from 'react-phone-number-input/locale/en';
+import 'react-phone-number-input/style.css';
+import { useInput } from '../BaseComponents/hooks/useInput';
+import Loader from '@/ToolJetUI/Loader/Loader';
+import Label from '@/_ui/Label';
+import { CountrySelect } from './CountrySelect';
+
+const tinycolor = require('tinycolor2');
+
+export const PhoneInput = (props) => {
+  const { properties, styles, componentName, darkMode, setExposedVariables, fireEvent } = props;
+  const transformedProps = {
+    ...props,
+    inputType: 'phone',
+  };
+  const inputLogic = useInput(transformedProps);
+  const {
+    inputRef,
+    labelRef,
+    visibility,
+    loading,
+    disable,
+    showValidationError,
+    isFocused,
+    labelWidth,
+    isValid,
+    validationError,
+    isMandatory,
+    handleBlur,
+    handleFocus,
+    value,
+    handlePhoneInputChange,
+    country,
+    setCountry,
+  } = inputLogic;
+  const { label, placeholder, isCountryChangeEnabled, defaultCountry = 'US' } = properties;
+
+  const {
+    textColor,
+    backgroundColor,
+    alignment,
+    width,
+    direction,
+    auto,
+    color,
+    borderColor,
+    accentColor,
+    errTextColor,
+    boxShadow,
+    borderRadius,
+  } = styles;
+  const _width = (width / 100) * 70;
+  const defaultAlignment = alignment === 'side' || alignment === 'top' ? alignment : 'side';
+  const isInitialRender = useRef(true);
+
+  const options = useMemo(
+    () =>
+      getCountries()
+        .map((country) => ({
+          label: `${en[country]} +${getCountryCallingCodeSafe(country)}`,
+          value: country,
+        }))
+        .sort((a, b) => a.label.localeCompare(b.label)),
+    []
+  );
+
+  const onInputValueChange = (value) => {
+    setExposedVariables({
+      country: country,
+      countryCode: `+${getCountryCallingCodeSafe(country)}`,
+      formattedValue: `+${getCountryCallingCodeSafe(country)} ${inputRef.current?.value}`,
+    });
+    handlePhoneInputChange(value);
+  };
+
+  const handleKeyUp = (e) => {
+    if (e.key === 'Enter') {
+      fireEvent('onEnterPressed');
+    }
+  };
+
+  useEffect(() => {
+    if (isInitialRender.current) {
+      setExposedVariables({
+        country: country,
+        countryCode: `+${getCountryCallingCodeSafe(country)}`,
+        formattedValue: `+${getCountryCallingCodeSafe(country)} ${inputRef.current?.value}`,
+        value: value,
+        setCountryCode: (code) => {
+          let value = getCountryCallingCodeSafe(code);
+          if (value) {
+            setCountry(code);
+          } else {
+            value = getCountries().find((country) => `+${getCountryCallingCode(country)}` === code);
+            setCountry(value ? value : '');
+          }
+        },
+      });
+      isInitialRender.current = false;
+    }
+  }, []);
+
+  useEffect(() => {
+    if (!isInitialRender.current) {
+      setCountry(defaultCountry);
+    }
+  }, [defaultCountry]);
+
+  const disabledState = disable || loading;
+
+  const loaderStyle = {
+    right:
+      direction === 'right' &&
+      defaultAlignment === 'side' &&
+      ((label?.length > 0 && width > 0) || (auto && width == 0 && label && label?.length != 0))
+        ? `${labelWidth + 11}px`
+        : '11px',
+    top:
+      defaultAlignment === 'top'
+        ? ((label?.length > 0 && width > 0) || (auto && width == 0 && label && label?.length != 0)) &&
+          'calc(50% + 10px)'
+        : '',
+    transform:
+      defaultAlignment === 'top' &&
+      ((label?.length > 0 && width > 0) || (auto && width == 0 && label && label?.length != 0)) &&
+      ' translateY(-50%)',
+    zIndex: 3,
+  };
+
+  const computedStyles = {
+    height: '100%',
+    borderRadius: `${borderRadius}px`,
+    color: !['#1B1F24', '#000', '#000000ff'].includes(textColor)
+      ? textColor
+      : disabledState
+      ? 'var(--text-disabled)'
+      : 'var(--text-primary)',
+    borderColor: isFocused
+      ? accentColor != '4368E3'
+        ? accentColor
+        : 'var(--primary-accent-strong)'
+      : borderColor != '#CCD1D5'
+      ? borderColor
+      : disabledState
+      ? '1px solid var(--borders-disabled-on-white)'
+      : 'var(--borders-default)',
+    '--tblr-input-border-color-darker': tinycolor(borderColor).darken(24).toString(),
+    backgroundColor:
+      backgroundColor != '#fff'
+        ? backgroundColor
+        : disabledState
+        ? darkMode
+          ? 'var(--surfaces-app-bg-default)'
+          : 'var(--surfaces-surface-03)'
+        : 'var(--surfaces-surface-01)',
+    padding: '8px 10px',
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+    borderBottomLeftRadius: '0px',
+    borderTopLeftRadius: '0px',
+    borderLeft: 'none',
+  };
+
+  return (
+    <>
+      <div
+        data-cy={`label-${String(componentName).toLowerCase()}`}
+        className={`text-input d-flex phone-input-widget ${
+          defaultAlignment === 'top' &&
+          ((width != 0 && label?.length != 0) || (auto && width == 0 && label && label?.length != 0))
+            ? 'flex-column'
+            : 'align-items-center'
+        } ${direction === 'right' && defaultAlignment === 'side' ? 'flex-row-reverse' : ''}
+        ${direction === 'right' && defaultAlignment === 'top' ? 'text-right' : ''}
+        ${visibility || 'invisible'}`}
+        style={{
+          position: 'relative',
+          whiteSpace: 'nowrap',
+          width: '100%',
+          height: '100%',
+        }}
+      >
+        <Label
+          label={label}
+          width={width}
+          labelRef={labelRef}
+          darkMode={darkMode}
+          color={color}
+          defaultAlignment={defaultAlignment}
+          direction={direction}
+          auto={auto}
+          isMandatory={isMandatory}
+          _width={_width}
+          labelWidth={labelWidth}
+        />
+        <div className="d-flex h-100 w-100" style={{ boxShadow, borderRadius: `${borderRadius}px` }}>
+          <CountrySelect
+            value={{ label: `${en[country]} +${getCountryCallingCodeSafe(country)}`, value: country }}
+            options={options}
+            isCountryChangeEnabled={isCountryChangeEnabled}
+            disabledState={disabledState}
+            borderRadius={borderRadius}
+            isValid={isValid}
+            computedStyles={computedStyles}
+            showValidationError={showValidationError}
+            darkMode={darkMode}
+            onChange={(selectedOption) => {
+              if (selectedOption) {
+                setCountry(selectedOption.value);
+              }
+            }}
+          />
+          <Input
+            ref={inputRef}
+            country={country}
+            international={false}
+            value={value}
+            onChange={onInputValueChange}
+            placeholder={placeholder}
+            style={computedStyles}
+            className={`tj-text-input-widget ${
+              !isValid && showValidationError ? 'is-invalid' : ''
+            } validation-without-icon`}
+            disabled={disabledState}
+            data-ignore-hover={true}
+            onBlur={handleBlur}
+            onFocus={handleFocus}
+            onKeyUp={handleKeyUp}
+          />
+        </div>
+        {loading && <Loader style={loaderStyle} width="16" />}
+      </div>
+      {showValidationError && visibility && (
+        <div
+          data-cy={`${String(componentName).toLowerCase()}-invalid-feedback`}
+          style={{
+            color: errTextColor !== '#D72D39' ? errTextColor : 'var(--status-error-strong)',
+            textAlign: direction == 'left' && 'end',
+            fontSize: '11px',
+            fontWeight: '400',
+            lineHeight: '16px',
+          }}
+        >
+          {validationError}
+        </div>
+      )}
+    </>
+  );
+};

frontend/src/AppBuilder/Widgets/PhoneInput/PhoneInput.jsx

@@ -134,7 +134,7 @@ export const PhoneInput = (props) => {
 
   const computedStyles = {
     height: '100%',
-    borderRadius: `${borderRadius}px`,
+    borderRadius: `0px ${borderRadius}px ${borderRadius}px 0px`,
     color: !['#1B1F24', '#000', '#000000ff'].includes(textColor)
       ? textColor
       : disabledState
@@ -165,7 +165,8 @@ export const PhoneInput = (props) => {
     borderTopLeftRadius: '0px',
     borderLeft: 'none',
   };
-
+  const countryCode = getCountryCallingCodeSafe(country);
+  console.log(countryCode);
   return (
     <>
       <div
@@ -217,7 +218,8 @@ export const PhoneInput = (props) => {
           />
           <Input
             ref={inputRef}
-            country={country}
+            {...(countryCode && { country: country })}
+            // country={country}
             international={false}
             value={value}
             onChange={onInputValueChange}

frontend/src/AppBuilder/_helpers/editorHelpers.js

@@ -31,7 +31,7 @@ import { Divider } from '@/Editor/Components/Divider';
 import { FilePicker } from '@/Editor/Components/FilePicker';
 import { PasswordInput } from '@/AppBuilder/Widgets/PasswordInput';
 import { EmailInput } from '@/AppBuilder/Widgets/EmailInput';
-import { PhoneInput } from '@/AppBuilder/Widgets/PhoneInput/PhoneInput';
+import { PhoneInput } from '@/AppBuilder/Widgets/PhoneCurrency/PhoneInput';
 // import { Calendar } from '@/Editor/Components/Calendar';
 // import { Listview } from '@/Editor/Components/Listview';
 import { IFrame } from '@/Editor/Components/IFrame';

frontend/src/_styles/theme.scss

@@ -18634,4 +18634,9 @@ section.ai-message-prompt-input-wrapper {
   .tj-text-input-widget.is-invalid {
     border-left: none !important;
   }
+
+  input[type="tel"] {
+    border-top-left-radius: '0px' !important;
+    border-bottom-left-radius: '0px' !important;
+  }
 }

server/ee

@@ -1 +1 @@
-Subproject commit 1da04eef696345ce9f35d42af92e5d6de992cd85
+Subproject commit 0eefbb71a1d5288f49641af5efaaab25970f27d1