@homefile/components-v2 2.24.12 → 2.24.14

package/dist/components/forms/dynamicForm/fields/CurrencyField.js

@@ -1,17 +1,13 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Controller, useFormContext } from 'react-hook-form';
+import { NumericFormat } from 'react-number-format';
 import { Flex, Input } from '@chakra-ui/react';
 import { FormIcon, LabeledField } from '../../..';
-import { formatCurrency } from '../../../../utils';
 export const CurrencyField = ({ label, id, icon, placeholder, value, }) => {
     const { control } = useFormContext();
-    return (_jsxs(Flex, { align: "center", gap: "base", flex: "auto", children: [_jsx(FormIcon, { icon: icon }), _jsx(Controller, { control: control, name: id, defaultValue: value, render: ({ field: { value, onChange } }) => {
-                    const handleChange = (e) => {
-                        const { value } = e.target;
-                        const number = Number(value.replace(/[^0-9]+/g, '')) / 100;
-                        const currency = formatCurrency({ value: number });
-                        onChange(currency);
-                    };
-                    return (_jsx(LabeledField, { label: label, children: _jsx(Input, { onChange: handleChange, placeholder: placeholder, textAlign: "right", value: value, _placeholder: { color: 'gray.2' } }) }));
+    return (_jsxs(Flex, { align: "center", gap: "base", flex: "auto", children: [_jsx(FormIcon, { icon: icon }), _jsx(Controller, { control: control, name: id, defaultValue: value, render: ({ field }) => {
+                    return (_jsx(LabeledField, { label: label, children: _jsx(NumericFormat, Object.assign({}, field, { customInput: Input, thousandSeparator: true, decimalScale: 2, fixedDecimalScale: true, prefix: "$", placeholder: placeholder, textAlign: "right", _placeholder: { color: 'gray.2' }, onValueChange: ({ floatValue }) => {
+                                field.onChange(floatValue);
+                            } })) }));
                 } })] }));
 };

package/dist/components/receipts/receipt/ReceiptItems.js

@@ -10,6 +10,6 @@ export const ReceiptItems = ({ isSelectDisabled = true, leftOptions = [], onItem
     });
     return (_jsxs(Box, { mb: "10rem", children: [_jsxs(Stack, { bg: "lightBlue.2", px: "4", pb: "base", pt: "2", children: [_jsx(Text, { textTransform: "uppercase", variant: "home", children: title }), _jsxs(Flex, { gap: "base", align: "center", children: [_jsx(Checkbox, { onChange: handleSelectAll }), _jsx(DoubleSelects, { isSelectDisabled: isSelectDisabled, leftOptions: leftOptions, rightOptions: rightOptions, onLeftSelectChange: onLeftSelectChange, onRightSelectChange: onRightSelectChange })] })] }), receipts.map((receipt) => {
                 const hasRoomType = !!(receipt === null || receipt === void 0 ? void 0 : receipt.roomType);
-                return (_jsxs(Box, { children: [!hasRoomType && (_jsx(ReceiptItem, Object.assign({ onChange: () => handleItemSelect(receipt._id), isChecked: isItemSelected(receipt._id), onSelectedChange: onReceiptSelectedChange, onEditClick: () => onEditReceipt === null || onEditReceipt === void 0 ? void 0 : onEditReceipt(receipt.sku), selectItems: receiptOptions, variant: variant }, receipt))), hasRoomType && (_jsx(ReceiptItemAssigned, Object.assign({ onChange: () => handleItemSelect(receipt._id), onRoomClick: onRoomClick, isChecked: isItemSelected(receipt._id), onSelectedChange: onReceiptSelectedChange, initialSelectValue: receiptOptions === null || receiptOptions === void 0 ? void 0 : receiptOptions[1], selectItems: receiptOptions, variant: variant }, receipt)))] }, receipt._id));
+                return (_jsxs(Box, { children: [!hasRoomType && (_jsx(ReceiptItem, Object.assign({ onChange: () => handleItemSelect(receipt._id), isChecked: isItemSelected(receipt._id), onSelectedChange: onReceiptSelectedChange, onEditClick: () => onEditReceipt === null || onEditReceipt === void 0 ? void 0 : onEditReceipt(receipt._id), selectItems: receiptOptions, variant: variant }, receipt))), hasRoomType && (_jsx(ReceiptItemAssigned, Object.assign({ onChange: () => handleItemSelect(receipt._id), onRoomClick: onRoomClick, isChecked: isItemSelected(receipt._id), onSelectedChange: onReceiptSelectedChange, initialSelectValue: receiptOptions === null || receiptOptions === void 0 ? void 0 : receiptOptions[1], selectItems: receiptOptions, variant: variant }, receipt)))] }, receipt._id));
             })] }));
 };

package/dist/stories/propertyTiles/MortgageInfo.stories.js

@@ -11,7 +11,7 @@ export default {
             amount: 0,
             maturityDate: '2025-04-17T00:00:00.000Z',
             documentDate: '2017-04-17T00:00:00.000Z',
-            estimatedMortgageBalance: 0,
+            estimatedMortgageBalance: 295847.12,
             estimatedMortgagePayment: 0,
             interestRate: 0,
             interestRateType: '',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@homefile/components-v2",
-  "version": "2.24.12",
+  "version": "2.24.14",
   "author": "Homefile",
   "license": "UNLICENSED",
   "typings": "dist/index.d.ts",
@@ -76,6 +76,7 @@
     "react-i18next": "^15.4.0",
     "react-icons": "^5.4.0",
     "react-modern-calendar-datepicker": "^3.1.6",
+    "react-number-format": "^5.4.4",
     "react-quill-new": "^3.3.3",
     "react-spinners": "^0.15.0",
     "recharts": "^2.15.0",

package/src/components/forms/dynamicForm/fields/CurrencyField.tsx

@@ -1,8 +1,8 @@
 import { Controller, useFormContext } from 'react-hook-form'
+import {NumericFormat} from 'react-number-format'
 import { Flex, Input } from '@chakra-ui/react'
 import { TextFieldI } from '@/interfaces'
 import { FormIcon, LabeledField } from '@/components'
-import { formatCurrency } from '@/utils'
 
 export const CurrencyField = ({
   label,
@@ -20,21 +20,22 @@ export const CurrencyField = ({
         control={control}
         name={id}
         defaultValue={value}
-        render={({ field: { value, onChange } }) => {
-          const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-            const { value } = e.target
-            const number = Number(value.replace(/[^0-9]+/g, '')) / 100
-            const currency = formatCurrency({ value: number })
-            onChange(currency)
-          }
+        render={({ field}) => {
           return (
             <LabeledField label={label}>
-              <Input
-                onChange={handleChange}
+              <NumericFormat
+                {...field}
+                customInput={Input}
+                thousandSeparator
+                decimalScale={2}
+                fixedDecimalScale
+                prefix="$"
                 placeholder={placeholder}
                 textAlign="right"
-                value={value}
                 _placeholder={{ color: 'gray.2' }}
+                onValueChange={({ floatValue }) => {
+                  field.onChange(floatValue)
+                }}
               />
             </LabeledField>
           )

package/src/components/receipts/receipt/ReceiptItems.tsx

@@ -51,7 +51,7 @@ export const ReceiptItems = ({
                 onChange={() => handleItemSelect(receipt._id)}
                 isChecked={isItemSelected(receipt._id)}
                 onSelectedChange={onReceiptSelectedChange}
-                onEditClick={() => onEditReceipt?.(receipt.sku)}
+                onEditClick={() => onEditReceipt?.(receipt._id)}
                 selectItems={receiptOptions}
                 variant={variant}
                 {...receipt}

package/src/stories/propertyTiles/MortgageInfo.stories.tsx

@@ -13,7 +13,7 @@ export default {
       amount: 0,
       maturityDate: '2025-04-17T00:00:00.000Z',
       documentDate: '2017-04-17T00:00:00.000Z',
-      estimatedMortgageBalance: 0,
+      estimatedMortgageBalance: 295847.12,
       estimatedMortgagePayment: 0,
       interestRate: 0,
       interestRateType: '',