@axos-web-dev/shared-components 1.0.100-dev.49 → 1.0.100-dev.49-fix.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/Forms/MortgageRate/MortgageRateForm.js +24 -28
- package/package.json +136 -136
|
@@ -159,6 +159,7 @@ const MortgageRate = ({
|
|
|
159
159
|
const [downPaymentPercentage, setDownPaymentPercentage] = useState(10);
|
|
160
160
|
const [_downPayment, setDownPayment] = useState(0);
|
|
161
161
|
const [isTypingDownPayment, setIsTypingDownPayment] = useState(false);
|
|
162
|
+
const [salesPriceVal, setSalesPriceVal] = useState(0);
|
|
162
163
|
const cachedEmailValidator = useCachedEmailValidator(validateEmail);
|
|
163
164
|
const schema = z.object({
|
|
164
165
|
firstName: z.string({ message: "First Name is required." }).regex(/^[A-Za-z][^0-9_!¡?÷?¿/\\+=@#$%ˆ&*,.^(){}|~<>;:[\]]{1,}$/g, {
|
|
@@ -194,7 +195,17 @@ const MortgageRate = ({
|
|
|
194
195
|
),
|
|
195
196
|
downPayment: z.number({ message: "Down Payment is required." }).optional().refine((val) => loanPurpose === 1 ? val != null : true, {
|
|
196
197
|
message: "Down Payment is required."
|
|
197
|
-
})
|
|
198
|
+
}).refine(
|
|
199
|
+
(val) => {
|
|
200
|
+
if (loanPurpose === 1) {
|
|
201
|
+
return val != null && val >= salesPriceVal * 0.01 && val <= salesPriceVal;
|
|
202
|
+
}
|
|
203
|
+
return true;
|
|
204
|
+
},
|
|
205
|
+
{
|
|
206
|
+
message: `Value must be between ${salesPriceVal * 0.01} and ${salesPriceVal}.`
|
|
207
|
+
}
|
|
208
|
+
),
|
|
198
209
|
creditScore: z.number({ message: "Credit Score is required." }).positive({ message: "Credit Score is required." }),
|
|
199
210
|
zipCode: z.string().trim().min(1, { message: "Zip Code is required." }).regex(/^\d{5}$/, { message: "ZIP code must be 5 digits." }),
|
|
200
211
|
appraisedValue: z.number({ message: "Home Price is required." }).optional().refine(
|
|
@@ -225,28 +236,12 @@ const MortgageRate = ({
|
|
|
225
236
|
message: "fields are not valid."
|
|
226
237
|
});
|
|
227
238
|
}
|
|
228
|
-
if (loanPurpose === 1 && data.salesPrice != null && data.downPayment != null) {
|
|
229
|
-
const minDownPayment = data.salesPrice * 0.01;
|
|
230
|
-
const maxDownPayment = data.salesPrice;
|
|
231
|
-
if (data.downPayment < minDownPayment || data.downPayment > maxDownPayment) {
|
|
232
|
-
ctx.addIssue({
|
|
233
|
-
code: z.ZodIssueCode.custom,
|
|
234
|
-
path: ["downPayment"],
|
|
235
|
-
message: `Value must be between ${minDownPayment.toLocaleString()} and ${maxDownPayment.toLocaleString()}.`
|
|
236
|
-
});
|
|
237
|
-
}
|
|
238
|
-
}
|
|
239
239
|
});
|
|
240
240
|
const methods = useForm({
|
|
241
|
-
resolver: zodResolver(
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
|
|
245
|
-
},
|
|
246
|
-
{ mode: "async" }
|
|
247
|
-
),
|
|
248
|
-
mode: "onChange",
|
|
249
|
-
reValidateMode: "onChange",
|
|
241
|
+
resolver: zodResolver(gen_schema, {
|
|
242
|
+
async: true
|
|
243
|
+
}),
|
|
244
|
+
mode: "all",
|
|
250
245
|
defaultValues: {
|
|
251
246
|
loanPurpose: 1,
|
|
252
247
|
AlternativeEmail: "bestbank@axos.com",
|
|
@@ -287,11 +282,13 @@ const MortgageRate = ({
|
|
|
287
282
|
const {
|
|
288
283
|
handleSubmit,
|
|
289
284
|
register,
|
|
290
|
-
formState: { errors, isValid, isSubmitting
|
|
285
|
+
formState: { errors, isValid, isSubmitting },
|
|
291
286
|
watch
|
|
292
287
|
} = methods;
|
|
293
|
-
const shouldDisable = !isValid || isSubmitting || isValidating;
|
|
294
288
|
const salesPrice = watch("salesPrice");
|
|
289
|
+
useEffect(() => {
|
|
290
|
+
setSalesPriceVal(salesPrice);
|
|
291
|
+
});
|
|
295
292
|
useEffect(() => {
|
|
296
293
|
if (salesPrice > 0 && !isTypingDownPayment) {
|
|
297
294
|
const calculatedDownPayment = Math.round(
|
|
@@ -300,7 +297,7 @@ const MortgageRate = ({
|
|
|
300
297
|
if (!isTypingDownPayment) setDownPayment(calculatedDownPayment);
|
|
301
298
|
methods.setValue("downPayment", calculatedDownPayment);
|
|
302
299
|
}
|
|
303
|
-
}, [salesPrice, downPaymentPercentage
|
|
300
|
+
}, [salesPrice, downPaymentPercentage]);
|
|
304
301
|
const submitForm = async (data) => {
|
|
305
302
|
const processData = {
|
|
306
303
|
...data
|
|
@@ -547,8 +544,7 @@ const MortgageRate = ({
|
|
|
547
544
|
type: "text",
|
|
548
545
|
...register("downPayment", {
|
|
549
546
|
required: true,
|
|
550
|
-
setValueAs: (value) => parseCurrency(value)
|
|
551
|
-
deps: ["salesPrice"]
|
|
547
|
+
setValueAs: (value) => parseCurrency(value)
|
|
552
548
|
}),
|
|
553
549
|
salesPrice: watch("salesPrice"),
|
|
554
550
|
downPaymentPercentage,
|
|
@@ -785,12 +781,12 @@ const MortgageRate = ({
|
|
|
785
781
|
"button",
|
|
786
782
|
{
|
|
787
783
|
type: "submit",
|
|
788
|
-
disabled:
|
|
784
|
+
disabled: !isValid,
|
|
789
785
|
className: button({
|
|
790
786
|
color: "secondary",
|
|
791
787
|
size: "large",
|
|
792
788
|
rounded: "medium",
|
|
793
|
-
disabled:
|
|
789
|
+
disabled: !isValid
|
|
794
790
|
}),
|
|
795
791
|
children: "Get My Rate"
|
|
796
792
|
}
|
package/package.json
CHANGED
|
@@ -1,136 +1,136 @@
|
|
|
1
|
-
{
|
|
2
|
-
"name": "@axos-web-dev/shared-components",
|
|
3
|
-
"description": "Axos shared components library for web.",
|
|
4
|
-
"version": "1.0.100-dev.49",
|
|
5
|
-
"type": "module",
|
|
6
|
-
"module": "dist/main.js",
|
|
7
|
-
"types": "dist/main.d.ts",
|
|
8
|
-
"files": [
|
|
9
|
-
"dist"
|
|
10
|
-
],
|
|
11
|
-
"sideEffects": [
|
|
12
|
-
"dist/assets/**/*.css"
|
|
13
|
-
],
|
|
14
|
-
"scripts": {
|
|
15
|
-
"dev": "vite",
|
|
16
|
-
"build": "tsc --p ./tsconfig.build.json && vite build",
|
|
17
|
-
"lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
|
|
18
|
-
"preview": "vite preview",
|
|
19
|
-
"prepublishOnly": "npm run build",
|
|
20
|
-
"check-types": "tsc --pretty --noEmit",
|
|
21
|
-
"check-format": "prettier --check .",
|
|
22
|
-
"check-lint": "eslint . --ext ts --ext tsx --ext js",
|
|
23
|
-
"format": "prettier --write .",
|
|
24
|
-
"test-all": "npm run check-format && npm run check-lint && npm run check-types && npm run build",
|
|
25
|
-
"prepare": "husky",
|
|
26
|
-
"storybook": "storybook dev -p 6006",
|
|
27
|
-
"build-storybook": "storybook build",
|
|
28
|
-
"npm:link": "npm run build && npm link"
|
|
29
|
-
},
|
|
30
|
-
"dependencies": {
|
|
31
|
-
"@headlessui/react": "^2.2.0",
|
|
32
|
-
"@hookform/resolvers": "^3.10.0",
|
|
33
|
-
"@next-safe-action/adapter-react-hook-form": "^2.0.0",
|
|
34
|
-
"@react-input/mask": "^1.2.15",
|
|
35
|
-
"@react-input/number-format": "^1.1.3",
|
|
36
|
-
"@storybook/icons": "^1.3.0",
|
|
37
|
-
"@storybook/preview-api": "^8.4.7",
|
|
38
|
-
"@ts-stack/markdown": "^1.5.0",
|
|
39
|
-
"@types/iframe-resizer": "3.5.13",
|
|
40
|
-
"@ujet/websdk-headless": "^3.41.4",
|
|
41
|
-
"@vanilla-extract/css": "^1.16.1",
|
|
42
|
-
"@vanilla-extract/recipes": "^0.5.1",
|
|
43
|
-
"antd": "^5.22.5",
|
|
44
|
-
"clsx": "^2.1.1",
|
|
45
|
-
"framer-motion": "^12.9.2",
|
|
46
|
-
"iframe-resizer": "^3.6.6",
|
|
47
|
-
"lodash": "^4.17.21",
|
|
48
|
-
"moment": "^2.30.1",
|
|
49
|
-
"next-safe-action": "^8.0.2",
|
|
50
|
-
"react-date-picker": "^11.0.0",
|
|
51
|
-
"react-date-range": "^2.0.1",
|
|
52
|
-
"react-hook-form": "^7.54.2",
|
|
53
|
-
"react-markdown": "^9.1.0",
|
|
54
|
-
"react-popper": "^2.3.0",
|
|
55
|
-
"react-slick": "^0.30.2",
|
|
56
|
-
"react-use": "^17.6.0",
|
|
57
|
-
"react-wrap-balancer": "^1.1.1",
|
|
58
|
-
"remark-gfm": "^4.0.1",
|
|
59
|
-
"rsuite": "^5.75.0",
|
|
60
|
-
"slick-carousel": "^1.8.1",
|
|
61
|
-
"typed-css-modules": "^0.9.1",
|
|
62
|
-
"vite-plugin-svgr": "^4.3.0",
|
|
63
|
-
"zod": "^3.24.1",
|
|
64
|
-
"zustand": "^4.5.5"
|
|
65
|
-
},
|
|
66
|
-
"peerDependencies": {
|
|
67
|
-
"@vanilla-extract/css-utils": "^0.1.3",
|
|
68
|
-
"@vanilla-extract/recipes": "^0.5.1",
|
|
69
|
-
"@vanilla-extract/vite-plugin": "^4.0.3",
|
|
70
|
-
"next": "^14.1.4",
|
|
71
|
-
"react": "^18.2.0",
|
|
72
|
-
"react-date-range": "^2.0.1",
|
|
73
|
-
"react-dom": "^18.2.0",
|
|
74
|
-
"react-popper": "^2.3.0",
|
|
75
|
-
"react-slick": "^0.30.2",
|
|
76
|
-
"slick-carousel": "^1.8.1"
|
|
77
|
-
},
|
|
78
|
-
"devDependencies": {
|
|
79
|
-
"@chromatic-com/storybook": "^1.9.0",
|
|
80
|
-
"@rollup/plugin-alias": "^5.1.1",
|
|
81
|
-
"@storybook/addon-essentials": "^8.4.7",
|
|
82
|
-
"@storybook/addon-interactions": "^8.4.7",
|
|
83
|
-
"@storybook/addon-links": "^8.4.7",
|
|
84
|
-
"@storybook/addon-mdx-gfm": "^8.4.7",
|
|
85
|
-
"@storybook/addon-onboarding": "^8.4.7",
|
|
86
|
-
"@storybook/addon-themes": "^8.4.7",
|
|
87
|
-
"@storybook/blocks": "^8.4.7",
|
|
88
|
-
"@storybook/react": "^8.6.14",
|
|
89
|
-
"@storybook/react-vite": "^8.4.7",
|
|
90
|
-
"@storybook/test": "^8.6.14",
|
|
91
|
-
"@svgr/core": "^8.1.0",
|
|
92
|
-
"@svgr/plugin-prettier": "^8.1.0",
|
|
93
|
-
"@svgr/plugin-svgo": "^8.1.0",
|
|
94
|
-
"@types/lodash": "^4.17.17",
|
|
95
|
-
"@types/node": "^20.19.0",
|
|
96
|
-
"@types/react": "^18.3.23",
|
|
97
|
-
"@types/react-date-range": "^1.4.9",
|
|
98
|
-
"@types/react-datepicker": "^6.2.0",
|
|
99
|
-
"@types/react-dom": "^18.3.7",
|
|
100
|
-
"@types/react-slick": "^0.23.13",
|
|
101
|
-
"@typescript-eslint/eslint-plugin": "^7.18.0",
|
|
102
|
-
"@typescript-eslint/parser": "^7.18.0",
|
|
103
|
-
"@vanilla-extract/css-utils": "^0.1.4",
|
|
104
|
-
"@vanilla-extract/recipes": "^0.5.5",
|
|
105
|
-
"@vanilla-extract/vite-plugin": "^4.0.18",
|
|
106
|
-
"@vitejs/plugin-react-swc": "^3.7.2",
|
|
107
|
-
"esbuild-vanilla-image-loader": "^0.1.3",
|
|
108
|
-
"eslint": "^8.57.1",
|
|
109
|
-
"eslint-plugin-react-hooks": "^4.6.2",
|
|
110
|
-
"eslint-plugin-react-refresh": "^0.4.16",
|
|
111
|
-
"eslint-plugin-storybook": "^0.8.0",
|
|
112
|
-
"glob": "^10.4.5",
|
|
113
|
-
"husky": "^9.1.7",
|
|
114
|
-
"next": "^14.1.4",
|
|
115
|
-
"prettier": "3.2.5",
|
|
116
|
-
"react": "^18.3.1",
|
|
117
|
-
"react-dom": "^18.3.1",
|
|
118
|
-
"rollup-plugin-preserve-directives": "^0.4.0",
|
|
119
|
-
"rollup-plugin-svg-import": "^3.0.0",
|
|
120
|
-
"rollup-plugin-svgo": "^2.0.0",
|
|
121
|
-
"storybook": "^8.4.7",
|
|
122
|
-
"typescript": "^5.7.2",
|
|
123
|
-
"typescript-plugin-css-modules": "^5.1.0",
|
|
124
|
-
"vite": "^5.4.11",
|
|
125
|
-
"vite-plugin-dts": "^3.9.1",
|
|
126
|
-
"vite-plugin-lib-inject-css": "^2.1.1",
|
|
127
|
-
"vite-plugin-setting-css-module": "^1.1.4",
|
|
128
|
-
"vite-tsconfig-paths": "^4.3.2"
|
|
129
|
-
},
|
|
130
|
-
"main": "index.js",
|
|
131
|
-
"directories": {
|
|
132
|
-
"lib": "lib"
|
|
133
|
-
},
|
|
134
|
-
"author": "axos-web-dev",
|
|
135
|
-
"license": "ISC"
|
|
136
|
-
}
|
|
1
|
+
{
|
|
2
|
+
"name": "@axos-web-dev/shared-components",
|
|
3
|
+
"description": "Axos shared components library for web.",
|
|
4
|
+
"version": "1.0.100-dev.49-fix.1",
|
|
5
|
+
"type": "module",
|
|
6
|
+
"module": "dist/main.js",
|
|
7
|
+
"types": "dist/main.d.ts",
|
|
8
|
+
"files": [
|
|
9
|
+
"dist"
|
|
10
|
+
],
|
|
11
|
+
"sideEffects": [
|
|
12
|
+
"dist/assets/**/*.css"
|
|
13
|
+
],
|
|
14
|
+
"scripts": {
|
|
15
|
+
"dev": "vite",
|
|
16
|
+
"build": "tsc --p ./tsconfig.build.json && vite build",
|
|
17
|
+
"lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
|
|
18
|
+
"preview": "vite preview",
|
|
19
|
+
"prepublishOnly": "npm run build",
|
|
20
|
+
"check-types": "tsc --pretty --noEmit",
|
|
21
|
+
"check-format": "prettier --check .",
|
|
22
|
+
"check-lint": "eslint . --ext ts --ext tsx --ext js",
|
|
23
|
+
"format": "prettier --write .",
|
|
24
|
+
"test-all": "npm run check-format && npm run check-lint && npm run check-types && npm run build",
|
|
25
|
+
"prepare": "husky",
|
|
26
|
+
"storybook": "storybook dev -p 6006",
|
|
27
|
+
"build-storybook": "storybook build",
|
|
28
|
+
"npm:link": "npm run build && npm link"
|
|
29
|
+
},
|
|
30
|
+
"dependencies": {
|
|
31
|
+
"@headlessui/react": "^2.2.0",
|
|
32
|
+
"@hookform/resolvers": "^3.10.0",
|
|
33
|
+
"@next-safe-action/adapter-react-hook-form": "^2.0.0",
|
|
34
|
+
"@react-input/mask": "^1.2.15",
|
|
35
|
+
"@react-input/number-format": "^1.1.3",
|
|
36
|
+
"@storybook/icons": "^1.3.0",
|
|
37
|
+
"@storybook/preview-api": "^8.4.7",
|
|
38
|
+
"@ts-stack/markdown": "^1.5.0",
|
|
39
|
+
"@types/iframe-resizer": "3.5.13",
|
|
40
|
+
"@ujet/websdk-headless": "^3.41.4",
|
|
41
|
+
"@vanilla-extract/css": "^1.16.1",
|
|
42
|
+
"@vanilla-extract/recipes": "^0.5.1",
|
|
43
|
+
"antd": "^5.22.5",
|
|
44
|
+
"clsx": "^2.1.1",
|
|
45
|
+
"framer-motion": "^12.9.2",
|
|
46
|
+
"iframe-resizer": "^3.6.6",
|
|
47
|
+
"lodash": "^4.17.21",
|
|
48
|
+
"moment": "^2.30.1",
|
|
49
|
+
"next-safe-action": "^8.0.2",
|
|
50
|
+
"react-date-picker": "^11.0.0",
|
|
51
|
+
"react-date-range": "^2.0.1",
|
|
52
|
+
"react-hook-form": "^7.54.2",
|
|
53
|
+
"react-markdown": "^9.1.0",
|
|
54
|
+
"react-popper": "^2.3.0",
|
|
55
|
+
"react-slick": "^0.30.2",
|
|
56
|
+
"react-use": "^17.6.0",
|
|
57
|
+
"react-wrap-balancer": "^1.1.1",
|
|
58
|
+
"remark-gfm": "^4.0.1",
|
|
59
|
+
"rsuite": "^5.75.0",
|
|
60
|
+
"slick-carousel": "^1.8.1",
|
|
61
|
+
"typed-css-modules": "^0.9.1",
|
|
62
|
+
"vite-plugin-svgr": "^4.3.0",
|
|
63
|
+
"zod": "^3.24.1",
|
|
64
|
+
"zustand": "^4.5.5"
|
|
65
|
+
},
|
|
66
|
+
"peerDependencies": {
|
|
67
|
+
"@vanilla-extract/css-utils": "^0.1.3",
|
|
68
|
+
"@vanilla-extract/recipes": "^0.5.1",
|
|
69
|
+
"@vanilla-extract/vite-plugin": "^4.0.3",
|
|
70
|
+
"next": "^14.1.4",
|
|
71
|
+
"react": "^18.2.0",
|
|
72
|
+
"react-date-range": "^2.0.1",
|
|
73
|
+
"react-dom": "^18.2.0",
|
|
74
|
+
"react-popper": "^2.3.0",
|
|
75
|
+
"react-slick": "^0.30.2",
|
|
76
|
+
"slick-carousel": "^1.8.1"
|
|
77
|
+
},
|
|
78
|
+
"devDependencies": {
|
|
79
|
+
"@chromatic-com/storybook": "^1.9.0",
|
|
80
|
+
"@rollup/plugin-alias": "^5.1.1",
|
|
81
|
+
"@storybook/addon-essentials": "^8.4.7",
|
|
82
|
+
"@storybook/addon-interactions": "^8.4.7",
|
|
83
|
+
"@storybook/addon-links": "^8.4.7",
|
|
84
|
+
"@storybook/addon-mdx-gfm": "^8.4.7",
|
|
85
|
+
"@storybook/addon-onboarding": "^8.4.7",
|
|
86
|
+
"@storybook/addon-themes": "^8.4.7",
|
|
87
|
+
"@storybook/blocks": "^8.4.7",
|
|
88
|
+
"@storybook/react": "^8.6.14",
|
|
89
|
+
"@storybook/react-vite": "^8.4.7",
|
|
90
|
+
"@storybook/test": "^8.6.14",
|
|
91
|
+
"@svgr/core": "^8.1.0",
|
|
92
|
+
"@svgr/plugin-prettier": "^8.1.0",
|
|
93
|
+
"@svgr/plugin-svgo": "^8.1.0",
|
|
94
|
+
"@types/lodash": "^4.17.17",
|
|
95
|
+
"@types/node": "^20.19.0",
|
|
96
|
+
"@types/react": "^18.3.23",
|
|
97
|
+
"@types/react-date-range": "^1.4.9",
|
|
98
|
+
"@types/react-datepicker": "^6.2.0",
|
|
99
|
+
"@types/react-dom": "^18.3.7",
|
|
100
|
+
"@types/react-slick": "^0.23.13",
|
|
101
|
+
"@typescript-eslint/eslint-plugin": "^7.18.0",
|
|
102
|
+
"@typescript-eslint/parser": "^7.18.0",
|
|
103
|
+
"@vanilla-extract/css-utils": "^0.1.4",
|
|
104
|
+
"@vanilla-extract/recipes": "^0.5.5",
|
|
105
|
+
"@vanilla-extract/vite-plugin": "^4.0.18",
|
|
106
|
+
"@vitejs/plugin-react-swc": "^3.7.2",
|
|
107
|
+
"esbuild-vanilla-image-loader": "^0.1.3",
|
|
108
|
+
"eslint": "^8.57.1",
|
|
109
|
+
"eslint-plugin-react-hooks": "^4.6.2",
|
|
110
|
+
"eslint-plugin-react-refresh": "^0.4.16",
|
|
111
|
+
"eslint-plugin-storybook": "^0.8.0",
|
|
112
|
+
"glob": "^10.4.5",
|
|
113
|
+
"husky": "^9.1.7",
|
|
114
|
+
"next": "^14.1.4",
|
|
115
|
+
"prettier": "3.2.5",
|
|
116
|
+
"react": "^18.3.1",
|
|
117
|
+
"react-dom": "^18.3.1",
|
|
118
|
+
"rollup-plugin-preserve-directives": "^0.4.0",
|
|
119
|
+
"rollup-plugin-svg-import": "^3.0.0",
|
|
120
|
+
"rollup-plugin-svgo": "^2.0.0",
|
|
121
|
+
"storybook": "^8.4.7",
|
|
122
|
+
"typescript": "^5.7.2",
|
|
123
|
+
"typescript-plugin-css-modules": "^5.1.0",
|
|
124
|
+
"vite": "^5.4.11",
|
|
125
|
+
"vite-plugin-dts": "^3.9.1",
|
|
126
|
+
"vite-plugin-lib-inject-css": "^2.1.1",
|
|
127
|
+
"vite-plugin-setting-css-module": "^1.1.4",
|
|
128
|
+
"vite-tsconfig-paths": "^4.3.2"
|
|
129
|
+
},
|
|
130
|
+
"main": "index.js",
|
|
131
|
+
"directories": {
|
|
132
|
+
"lib": "lib"
|
|
133
|
+
},
|
|
134
|
+
"author": "axos-web-dev",
|
|
135
|
+
"license": "ISC"
|
|
136
|
+
}
|