@abgov/jsonforms-components 1.35.1 → 1.35.3

package/index.esm.js

@@ -4,7 +4,7 @@ import { GoAFormItem, GoAInput, GoATextArea, GoACallout, GoAInputDate, GoAInputD
 import styled from 'styled-components';
 import axios from 'axios';
 import get$1 from 'lodash/get';
-import { rankWith, isStringControl, and, optionIs, uiTypeIs, isDateControl, isNumberControl, isIntegerControl, isDateTimeControl, isTimeControl, isEnumControl, isBooleanControl, getAjv, isVisible, isEnabled, deriveLabelForUISchemaElement, schemaTypeIs, formatIs, createDefaultValue, Paths, or, isObjectArrayControl, isPrimitiveArrayControl, scopeEndsWith, hasType, isControl, isCategorization, isLayout } from '@jsonforms/core';
+import { rankWith, isStringControl, and, optionIs, uiTypeIs, isDateControl, isNumberControl, isIntegerControl, isDateTimeControl, isTimeControl, isEnumControl, isBooleanControl, getAjv, isVisible, isEnabled, deriveLabelForUISchemaElement, schemaTypeIs, formatIs, createDefaultValue, Paths, or, isObjectArrayControl, isPrimitiveArrayControl, isObjectControl, hasType, isControl, isCategorization, isLayout } from '@jsonforms/core';
 import { withJsonFormsControlProps, withJsonFormsRendererProps, withJsonFormsEnumProps, withTranslateProps, useJsonForms, JsonFormsDispatch, withJsonFormsLayoutProps, withJsonFormsArrayLayoutProps, withJsonFormsCellProps } from '@jsonforms/react';
 import { isEqual } from 'lodash';
 import merge from 'lodash/merge';
@@ -4858,6 +4858,7 @@ styled.h3(_t9$1 || (_t9$1 = _$5`
 const RightAlignmentDiv = styled.div(_t10$1 || (_t10$1 = _$5`
   display: flex;
   justify-content: flex-end;
+  margin-bottom: var(--goa-space-l);
 `));
 
 var toString$2 = toString$d;
@@ -6733,8 +6734,10 @@ const AddressInputs = ({
   address,
   handleInputChange,
   isAlbertaAddress,
-  postalCodeErrorMsg
+  errors,
+  handleOnBlur
 }) => {
+  var _a, _b;
   const provinces = [{
     value: 'AB',
     label: 'Alberta'
@@ -6792,17 +6795,19 @@ const AddressInputs = ({
       gap: "s",
       children: [jsx(GoAFormItem, {
         label: "City",
+        error: (_a = errors === null || errors === void 0 ? void 0 : errors['municipality']) !== null && _a !== void 0 ? _a : '',
         children: jsx(GoAInput, {
           name: "city",
           testId: "address-form-city",
           ariaLabel: 'address-form-city',
           value: (address === null || address === void 0 ? void 0 : address.city) || '',
           onChange: (name, value) => handleInputChange(name, value),
+          onBlur: (name, value) => handleOnBlur('municipality'),
           width: "100%"
         })
       }), jsx(GoAFormItem, {
         label: "Postal Code",
-        error: postalCodeErrorMsg,
+        error: (_b = errors === null || errors === void 0 ? void 0 : errors['postalCode']) !== null && _b !== void 0 ? _b : '',
         children: jsx(GoAInput, {
           name: "postalCode",
           testId: "address-form-postal-code",
@@ -6810,6 +6815,7 @@ const AddressInputs = ({
           placeholder: "A0A 0A0",
           value: (address === null || address === void 0 ? void 0 : address.postalCode) || '',
           onChange: (name, value) => handleInputChange(name, value),
+          onBlur: (name, value) => handleOnBlur(name),
           width: "100%",
           maxLength: 7
         })
@@ -7007,6 +7013,15 @@ const validatePostalCode = values => {
   const postalCodeRegex = /^[A-Za-z]\d[A-Za-z] \d[A-Za-z]\d$/;
   return postalCodeRegex.test(values);
 };
+const handlePostalCodeValidation = (validatePc, message, value, errors) => {
+  const newErrors = Object.assign({}, errors);
+  if (!validatePc && value.length >= 4) {
+    newErrors['postalCode'] = message;
+  } else {
+    delete newErrors['postalCode'];
+  }
+  return newErrors;
+};
 
 let _ = t => t,
   _t;
@@ -7192,7 +7207,7 @@ const HelpReviewContent = withJsonFormsControlProps(HelpContentReviewComponent);
 
 const ADDRESS_PATH = 'api/gateway/v1/address/v1/find';
 const AddressLookUpControl = props => {
-  var _a, _b, _c;
+  var _a, _b, _c, _d;
   const {
     data,
     path,
@@ -7219,7 +7234,7 @@ const AddressLookUpControl = props => {
   const [searchTerm, setSearchTerm] = useState('');
   const [suggestions, setSuggestions] = useState([]);
   const [loading, setLoading] = useState(false);
-  const [postalCodeErrorMsg, setPostalCodeErrorMsg] = useState('');
+  const [errors, setErrors] = useState({});
   const updateFormData = updatedAddress => {
     setAddress(updatedAddress);
     handleChange(path, updatedAddress);
@@ -7227,14 +7242,10 @@ const AddressLookUpControl = props => {
   const handleInputChange = (field, value) => {
     var _a, _b;
     let newAddress;
+    const postalCodeErrorMessage = (_b = (_a = schema.errorMessage) === null || _a === void 0 ? void 0 : _a.properties) === null || _b === void 0 ? void 0 : _b.postalCode;
     if (field === 'postalCode') {
       const validatePc = validatePostalCode(value);
-      if (!validatePc && value.length >= 4) {
-        const postalCodeErrorMessage = (_b = (_a = schema.errorMessage) === null || _a === void 0 ? void 0 : _a.properties) === null || _b === void 0 ? void 0 : _b.postalCode;
-        setPostalCodeErrorMsg(postalCodeErrorMessage !== null && postalCodeErrorMessage !== void 0 ? postalCodeErrorMessage : '');
-      } else {
-        setPostalCodeErrorMsg('');
-      }
+      setErrors(handlePostalCodeValidation(validatePc, postalCodeErrorMessage ? postalCodeErrorMessage : '', value, errors));
       if (value.length >= 4 && value.indexOf(' ') === -1) {
         value = value.slice(0, 3) + ' ' + value.slice(3);
       }
@@ -7275,19 +7286,32 @@ const AddressLookUpControl = props => {
     });
     fetchSuggestions();
   }, [searchTerm, formUrl, isAlbertaAddress]);
-  const handleDropdownChange = value => __awaiter(void 0, void 0, void 0, function* () {
+  const handleDropdownChange = value => {
     setSearchTerm(value);
     handleInputChange('addressLine1', value);
-  });
+  };
   const handleSuggestionClick = suggestion => {
     const suggestAddress = mapSuggestionToAddress(suggestion);
     setAddress(suggestAddress);
     handleChange(path, suggestAddress);
     setSuggestions([]);
+    setErrors({});
+  };
+  const handleRequiredFieldBlur = name => {
+    const requiredFields = schema.required;
+    if (!(data === null || data === void 0 ? void 0 : data[name]) || data[name] === '' || requiredFields.includes(name)) {
+      const err = Object.assign({}, errors);
+      err[name] = name === 'municipality' ? `city is required` : `${name} is required`;
+      setErrors(err);
+    } else {
+      delete errors[name];
+    }
   };
   return jsxs("div", {
     children: [renderHelp(), jsx(GoAFormItem, {
       label: label,
+      error: (_d = errors === null || errors === void 0 ? void 0 : errors['addressLine1']) !== null && _d !== void 0 ? _d : '',
+      "data-testId": "form-address-line1",
       children: jsxs(SearchBox, {
         children: [jsx(GoAInput, {
           leadingIcon: autocompletion ? 'search' : undefined,
@@ -7297,6 +7321,7 @@ const AddressLookUpControl = props => {
           placeholder: "Start typing the first line of your address",
           value: (address === null || address === void 0 ? void 0 : address.addressLine1) || '',
           onChange: (name, value) => handleDropdownChange(value),
+          onBlur: (name, value) => handleRequiredFieldBlur(name),
           width: "100%"
         }), loading && autocompletion && jsx(GoASkeleton, {
           type: "text",
@@ -7312,14 +7337,15 @@ const AddressLookUpControl = props => {
       })
     }), jsx("br", {}), jsx(AddressInputs, {
       address: address,
+      errors: errors,
       handleInputChange: handleInputChange,
       isAlbertaAddress: isAlbertaAddress,
-      postalCodeErrorMsg: postalCodeErrorMsg
+      handleOnBlur: handleRequiredFieldBlur
     })]
   });
 };
 
-const AddressLookUpTester = rankWith(3, and(scopeEndsWith('mailingAddress')));
+const AddressLookUpTester = rankWith(3, isObjectControl);
 
 const GoATextCell = props => jsx(GoAInputText, Object.assign({}, props));
 const GoATextCellTester = rankWith(1, isStringControl);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abgov/jsonforms-components",
-  "version": "1.35.1",
+  "version": "1.35.3",
   "license": "Apache-2.0",
   "description": "Government of Alberta - React renderers for JSON Forms based on the design system.",
   "repository": "https://github.com/GovAlta/adsp-monorepo",

package/src/lib/Controls/AddressLookup/AddressInputs.d.ts

@@ -4,7 +4,8 @@ interface AddressInputsProps {
     address: Address;
     handleInputChange: (field: string, value: string) => void;
     isAlbertaAddress?: boolean;
-    postalCodeErrorMsg?: string;
+    errors?: any;
+    handleOnBlur: (field: string) => void;
 }
 export declare const AddressInputs: React.FC<AddressInputsProps>;
 export {};

package/src/lib/Controls/AddressLookup/utils.d.ts

@@ -4,3 +4,6 @@ export declare const filterAlbertaAddresses: (suggestions: Suggestion[]) => Sugg
 export declare const filterSuggestionsWithoutAddressCount: (suggestions: Suggestion[]) => Suggestion[];
 export declare const mapSuggestionToAddress: (suggestion: Suggestion) => Address;
 export declare const validatePostalCode: (values: string) => boolean;
+export declare const handlePostalCodeValidation: (validatePc: boolean, message: string, value: string, errors: Record<string, string>) => {
+    [x: string]: string;
+};