ui-soxo-bootstrap-core 2.6.13 → 2.6.15

package/core/lib/elements/basic/country-phone-input/country-phone-input.js

@@ -16,7 +16,7 @@ import PropTypes from "prop-types";
 import './phone-input.scss';
 
 
-export default function CountryPhoneInput({ value, onChange, disabled, disableCountryCode, required, defaultCountryCode, onBlur }) {
+export default function CountryPhoneInput({ value, onChange, disabled, disableCountryCode, required, defaultCountryCode, onBlur, onKeyDown }) {
 
   let inputRef = useRef();
 
@@ -85,7 +85,7 @@ export default function CountryPhoneInput({ value, onChange, disabled, disableCo
         // country={disableCountryCode ? false : 'in'}
         value={phone}
         onChange={handleInput}
-        inputProps={{ required: required }}
+        inputProps={{ required: required, onKeyDown: onKeyDown }}
         disabled={disabled}
         onBlur={onBlur}
       />

package/core/lib/elements/basic/dragabble-wrapper/draggable-wrapper.js

@@ -102,7 +102,7 @@ export default function DraggableWrapper({ id, index, movePanel, item, dragEnabl
         >
           <div style={{ flex: 1 }}>
             {dragEnabled && <span style={{ marginRight: 8 }}>⋮⋮</span>}
-            <span>{item.name}</span>
+            <span>{item.caption}</span>
             {dragEnabled ? (
               <span style={{ marginLeft: 8, fontSize: 11, color: '#999' }}>(Level {level})</span>
             ) : (

package/core/lib/elements/basic/menu-tree/menu-tree.js

@@ -79,7 +79,7 @@ export const MenuTree = ({ menus, selectedMenus = [], toggleMenu, parentId = nul
             {/* Left Side */}
             <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
               {showCheckbox && <Checkbox checked={selectedMenus.includes(menu.id)} onChange={(e) => onParentChange(e.target.checked)} />}
-              <span>{menu.title || menu.caption}</span>
+              <span>{menu.caption}</span>
             </div>
             <Tag color={menu.is_visible === true ? 'green' : 'blue'}>{menu.is_visible === true ? 'VISIBLE' : 'HIDDEN'}</Tag>{' '}
           </div>
@@ -110,7 +110,7 @@ export const MenuTree = ({ menus, selectedMenus = [], toggleMenu, parentId = nul
                       onChange={(e) => onParentChange(e.target.checked)}
                     />
                   )}
-                  <span>{menu.title || menu.caption}</span>
+                  <span>{menu.caption}</span>
                 </div>
                 <Tag color={menu.is_visible === true ? 'green' : 'blue'}>{menu.is_visible === true ? 'VISIBLE' : 'HIDDEN'}</Tag>{' '}
               </div>

package/core/lib/pages/login/commnication-mode-selection.js

@@ -31,10 +31,9 @@ function CommunicationModeSelection({ communicationMode, setCommunicationMode, m
           </Radio>
 
           {/* SMS Option */}
-          {/* Commented for future use.  */}
-          {/* <Radio checked={communicationMode === 'mobile'} onChange={() => setCommunicationMode('mobile')}>
+          <Radio checked={communicationMode === 'mobile'} disabled onChange={() => setCommunicationMode('mobile')}>
             SMS <MessageOutlined className="otp-icon" style={{ marginLeft: 6 }} />
-          </Radio> */}
+          </Radio>
         </div>
 
         {/* Validation Error */}

package/core/lib/pages/login/login.js

@@ -624,28 +624,28 @@ function LoginPhone({ history, appSettings }) {
     return user.username;
   };
 
-  const { globalCustomerHeader = () => {} } = appSettings;
+  const { globalCustomerHeader = () => { } } = appSettings;
 
   const themeName = process.env.REACT_APP_THEME; // e.g., 'purple'
   const isPurple = themeName === 'purple';
 
   const sectionStyle = isPurple
     ? {
-        width: '100%',
-        height: '100vh',
-        backgroundImage: `${state.theme.colors.loginPageBackground}`,
-        backgroundPosition: 'center bottom, center',
-        backgroundRepeat: 'no-repeat, no-repeat',
-        backgroundSize: 'cover, cover',
-      }
+      width: '100%',
+      height: '100vh',
+      backgroundImage: `${state.theme.colors.loginPageBackground}`,
+      backgroundPosition: 'center bottom, center',
+      backgroundRepeat: 'no-repeat, no-repeat',
+      backgroundSize: 'cover, cover',
+    }
     : {
-        width: '100%',
-        height: '100vh',
-        background: 'linear-gradient(to bottom, #F7F6E3 0%, #EEF1DE 20%, #D5E4DA 45%, #9DBFC8 75%, #4F89A6 100%)',
-        backgroundPosition: 'center bottom, center',
-        backgroundRepeat: 'no-repeat, no-repeat',
-        backgroundSize: 'cover, cover',
-      };
+      width: '100%',
+      height: '100vh',
+      background: 'linear-gradient(to bottom, #F7F6E3 0%, #EEF1DE 20%, #D5E4DA 45%, #9DBFC8 75%, #4F89A6 100%)',
+      backgroundPosition: 'center bottom, center',
+      backgroundRepeat: 'no-repeat, no-repeat',
+      backgroundSize: 'cover, cover',
+    };
 
   return (
     <section className="full-page" style={sectionStyle}>
@@ -835,7 +835,7 @@ function LoginPhone({ history, appSettings }) {
                   //     ? 'Your password has expired. Select a preferred communication method to receive the One-Time Password (OTP) to continue.'
                   //     : 'Enter your username and Select a preferred communication method to receive the One-Time Password (OTP) to continue..'
                   // }
-                  buttonText={expiredPassword ? 'Send Reset Link' : 'Reset Password'}
+                  buttonText={expiredPassword ? 'Send Reset Link' : 'Send Reset Link'}
                 />
               )}
             </div>

package/core/lib/utils/common/common.utils.js

@@ -4,6 +4,7 @@ Implements utility functions to be used across project
 
 /*eslint no-useless-escape:"off",eqeqeq: "off"*/
 import moment from 'moment';
+import { parsePhoneNumberFromString, isValidPhoneNumber } from 'libphonenumber-js';
 
 export function IsObjectHaveKeys(obj) {
   return obj && typeof obj == 'object' && Object.keys(obj).length;
@@ -221,3 +222,51 @@ export function safeJSON(value) {
     return null;
   }
 }
+
+/**
+ * Convert +countrycode phone into form compatible structure
+ * @param {string} phone
+ * @returns {object|null}
+ */
+export const formatPhoneForForm = (phone) => {
+  if (!phone) return null;
+
+  const parsed = parsePhoneNumberFromString(phone);
+
+  if (!parsed) return null;
+
+  return {
+    value: parsed.nationalNumber,
+    code: {
+      dialCode: parsed.countryCallingCode,
+      countryCode: parsed.country?.toLowerCase(),
+    },
+    valid: true,
+  };
+};
+
+/**
+ * Validates a phone number from CountryPhoneInput.
+ * Builds full number using country dial code and checks validity.
+ *
+ * @param {Object} _ - Ant Design rule parameter (unused)
+ * @param {Object} val - Phone value object from form
+ * @returns {Promise<void>}
+ */
+export const phoneValidator = (_, val) => {
+  if (!val || !val.value || !val?.code?.dialCode) {
+    return Promise.resolve();
+  }
+
+  const fullPhone = `+${val.code.dialCode}${val.value}`;
+
+  return isValidPhoneNumber(fullPhone) ? Promise.resolve() : Promise.reject('Invalid mobile number');
+};
+
+// Returns phone number with country code (e.g., +919876543210)
+export const formatPhoneWithCountryCode = (phone) => {
+  if (phone && typeof phone === 'object' && phone.code) {
+    return `+${phone.code.dialCode}${phone.value}`;
+  }
+  return phone;
+};

package/core/lib/utils/index.js

@@ -14,7 +14,7 @@ import { GetData, PostData, PutData, DeleteData } from './http/http.utils';
 
 import { getExportData } from './generic/generic.utils';
 
-import { ConvertBytesToArray, safeJSON } from './common/common.utils';
+import { ConvertBytesToArray, safeJSON, formatPhoneForForm, phoneValidator, formatPhoneWithCountryCode } from './common/common.utils';
 
 import SettingsUtil from './setting.utils';
 
@@ -37,4 +37,7 @@ export {
   SettingsUtil,
   FormUtils,
   safeJSON,
+  formatPhoneForForm,
+  phoneValidator,
+  formatPhoneWithCountryCode,
 };

package/core/models/roles/components/role-add/role-add.js

@@ -301,7 +301,7 @@ const MenuTree = ({ menus, selectedMenus, toggleMenu, parentId = null }) => {
                     }
                   }}
                 />
-                <span>{menu.title || menu.caption}</span>
+                <span>{menu.caption}</span>
               </div>
               <Tag color={menu.is_visible === true ? 'green' : 'blue'}>{menu.is_visible === true ? 'VISIBLE' : 'HIDDEN'}</Tag>{' '}
             </div>
@@ -327,7 +327,7 @@ const MenuTree = ({ menus, selectedMenus, toggleMenu, parentId = null }) => {
                     onClick={(e) => e.stopPropagation()}
                   >
                     <Checkbox checked={parentChecked} indeterminate={parentIndeterminate} onChange={(e) => onParentChange(e.target.checked)} />
-                    <span>{menu.title || menu.caption}</span>
+                    <span>{menu.caption}</span>
                   </div>
                   <Tag color={menu.is_visible === true ? 'green' : 'blue'}>{menu.is_visible === true ? 'VISIBLE' : 'HIDDEN'}</Tag>{' '}
                 </div>

package/core/models/staff/components/staff-add/staff-add.js

@@ -1,8 +1,9 @@
 import React, { useState, useEffect, useRef } from 'react';
 
 import { Modal, Tabs, Input, Form, Row, Col, message, Checkbox, Select } from 'antd';
-import { useTranslation, Button } from './../../../../lib/';
+import { useTranslation, Button, CountryPhoneInput, phoneValidator as libPhoneValidator, formatPhoneForForm } from './../../../../lib/';
 import { UsersAPI } from '../../..';
+import { formatPhoneWithCountryCode } from '../../../../lib/utils/common/common.utils';
 
 const StaffAdd = ({ visible, onCancel, staffId, staffData, onSuccess }) => {
   const [form] = Form.useForm();
@@ -61,18 +62,6 @@ const StaffAdd = ({ visible, onCancel, staffId, staffData, onSuccess }) => {
     }
   }, [visible]);
 
-  const phoneValidator = (_, value) => {
-    if (!value) {
-      return Promise.resolve(); // not required
-    }
-
-    if (!/^\d{10}$/.test(value)) {
-      return Promise.reject('Phone number must be 10 digits');
-    }
-
-    return Promise.resolve();
-  };
-
   /** -------------------------------
    *  API CALL – Designations
    * ------------------------------- */
@@ -201,8 +190,8 @@ const StaffAdd = ({ visible, onCancel, staffId, staffData, onSuccess }) => {
       shortName: data.shortName,
       description: data.description,
       designation: data.designationPtr,
-      phone1: data.phone || data.mobile,
-      phone2: data.alternateMobile,
+      phone1: formatPhoneForForm(data.phone || data.mobile),
+      phone2: formatPhoneForForm(data.alternateMobile),
       email1: data.email,
       email2: data.alternateEmail,
       slno: data.slNo,
@@ -223,14 +212,17 @@ const StaffAdd = ({ visible, onCancel, staffId, staffData, onSuccess }) => {
   const handleFinish = async (values) => {
     setLoading(true);
 
+    let phone1Value = formatPhoneWithCountryCode(values.phone1);
+    let phone2Value = formatPhoneWithCountryCode(values.phone2);
+
     const payload = {
       id: values.id,
       shortName: values.shortName,
       description: values.description,
       designationPtr: values.designation ?? existing.designationPtr ?? null,
-      phone: values.phone1 ?? existing.phone ?? null,
-      mobile: values.phone1 ?? existing.mobile ?? null,
-      alternateMobile: values.phone2 ?? existing.alternateMobile ?? null,
+      phone: phone1Value ?? existing.phone ?? null,
+      mobile: phone1Value ?? existing.mobile ?? null,
+      alternateMobile: phone2Value ?? existing.alternateMobile ?? null,
       email: values.email1 ?? existing.email ?? null,
       alternateEmail: values.email2 ?? existing.alternateEmail ?? null,
       remarks: values.remarks ?? existing.remarks ?? null,
@@ -331,26 +323,22 @@ const StaffAdd = ({ visible, onCancel, staffId, staffData, onSuccess }) => {
                 </Form.Item>
               </Col> */}
               <Col span={6}>
-                <Form.Item label="Phone Number" name="phone1" rules={[{ validator: phoneValidator }]}>
-                  <Input
-                    maxLength={10}
-                    autoComplete="off"
-                    placeholder="Enter Phone Number"
-                    inputMode="numeric"
-                    onChange={(e) => (e.target.value = e.target.value.replace(/\D/g, ''))}
+                <Form.Item label="Phone Number" name="phone1" validateTrigger="onBlur" rules={[{ validator: libPhoneValidator }]}>
+                  <CountryPhoneInput
+                    defaultCountryCode={process.env.REACT_APP_COUNTRYCODE}
+                    enableSearch
+                    inputStyle={{ width: '100%' }}
                     onKeyDown={handleEnterKey}
                   />
                 </Form.Item>
               </Col>
 
               <Col span={6}>
-                <Form.Item label="Alternate Phone Number" name="phone2" rules={[{ validator: phoneValidator }]}>
-                  <Input
-                    maxLength={10}
-                    placeholder="Enter Phone Number"
-                    autoComplete="off"
-                    inputMode="numeric"
-                    onChange={(e) => (e.target.value = e.target.value.replace(/\D/g, ''))}
+                <Form.Item label="Alternate Phone Number" name="phone2" validateTrigger="onBlur" rules={[{ validator: libPhoneValidator }]}>
+                  <CountryPhoneInput
+                    defaultCountryCode={process.env.REACT_APP_COUNTRYCODE}
+                    enableSearch
+                    inputStyle={{ width: '100%' }}
                     onKeyDown={handleEnterKey}
                   />
                 </Form.Item>

package/core/models/users/components/user-add/user-add.js

@@ -6,7 +6,7 @@ import { Skeleton, Typography, message, Switch, Form, Input, Select, Checkbox, R
 
 import AsyncSelect from 'react-select/async';
 
-import { Table, Card, Button, JSONInput, GlobalContext, safeJSON } from './../../../../lib/';
+import { Table, Card, Button, JSONInput, GlobalContext, safeJSON, CountryPhoneInput, phoneValidator } from './../../../../lib/';
 
 import { ModelsAPI, PagesAPI, RolesAPI } from '../../..';
 
@@ -357,6 +357,10 @@ const UserAdd = ({ model, callback, edit, history, formContent, match, additiona
    * Submit values
    */
   const onSubmit = (values) => {
+    const mobileData = values.mobile;
+
+    const mobileWithCountryCode = `+${mobileData.code.dialCode}${mobileData.value}`;
+
     values.defaultBranch = String(values.defaultBranch);
 
     /**If PanelOpen is open and edit mode then password will be existing password else new password*/
@@ -378,6 +382,7 @@ const UserAdd = ({ model, callback, edit, history, formContent, match, additiona
     values = {
       ...values,
       auth_type: 'LDAP',
+      mobile: mobileWithCountryCode,
       FA: authentication,
     };
 
@@ -597,23 +602,10 @@ const UserAdd = ({ model, callback, edit, history, formContent, match, additiona
               <Form.Item
                 name="mobile"
                 label="Mobile"
-                rules={[
-                  { required: true, message: 'Please enter your mobile number' },
-                  {
-                    pattern: /^[0-9]{10}$/,
-                    message: 'Mobile number must be exactly 10 digits',
-                  },
-                ]}
+                validateTrigger="onBlur"
+                rules={[{ required: true, message: 'Mobile number required' }, { validator: phoneValidator }]}
               >
-                <Input
-                  placeholder="Enter Mobile"
-                  maxLength={10}
-                  onKeyPress={(e) => {
-                    if (!/[0-9]/.test(e.key)) {
-                      e.preventDefault();
-                    }
-                  }}
-                />
+                <CountryPhoneInput defaultCountryCode={process.env.REACT_APP_COUNTRYCODE} enableSearch inputStyle={{ width: '100%' }} />
               </Form.Item>
             </Col>
             <Col span={8}>

package/core/models/users/components/user-add/user-edit.js

@@ -3,6 +3,7 @@ import { Modal, Button, Skeleton } from 'antd';
 import { EditOutlined } from '@ant-design/icons';
 import UserAdd from '../../../../models/users/components/user-add/user-add';
 import { UsersAPI } from '../../..';
+import { formatPhoneForForm } from '../../../../lib';
 
 export default function UserEdit(record) {
   const [visible, setVisible] = useState(false);
@@ -44,13 +45,15 @@ export default function UserEdit(record) {
           // extract dbPtr (branch code)
           const defaultBranchCode = defaultBranchObj?.branch_id ? Number(defaultBranchObj.branch_id) : undefined;
 
+          const formattedMobile = formatPhoneForForm(apiData.mobile);
+
           // Construct mapped data object
           const mappedData = {
             id: apiData.id,
             user_type: otherDetails.user_type || apiData.user_type,
             name: apiData.name,
             email: apiData.email,
-            mobile: apiData.mobile,
+            mobile: formattedMobile,
             designation: apiData.designation_code,
             department: Number(apiData.department_id),
             // Handle selected branches and default branch
@@ -63,7 +66,7 @@ export default function UserEdit(record) {
             // Handle doctor codes
             default_code: apiData.doctor_code,
             doctor_code: apiData.doctor_code,
-            staff_code:apiData.staff_id,
+            staff_code: apiData.staff_id,
             auth_type: apiData.auth_type,
             FA: apiData.FA,
             active: apiData.active ? true : false,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ui-soxo-bootstrap-core",
-  "version": "2.6.13",
+  "version": "2.6.15",
   "description": "All the Core Components for you to start",
   "keywords": [
     "all in one"
@@ -48,6 +48,7 @@
     "i18next": "^22.4.15",
     "i18next-browser-languagedetector": "^7.0.1",
     "jquery": "^3.6.0",
+    "libphonenumber-js": "^1.12.39",
     "lint-staged": "^12.3.2",
     "moment-timezone": "^0.5.34",
     "otp-input-react": "^0.3.0",