@hmcts/rpx-xui-common-lib 1.9.0-address-non-postcode-2 → 1.9.0-address-lookup-full

package/bundles/hmcts-rpx-xui-common-lib.umd.js

@@ -863,7 +863,8 @@
         AddressMessageEnum["NO_STREET_SELECTED"] = "Enter building and street";
         AddressMessageEnum["NO_CITY_SELECTED"] = "Enter town or city";
         AddressMessageEnum["NO_COUNTRY_SELECTED"] = "Enter country";
-        AddressMessageEnum["NO_POSTCODE_SELECTED"] = "Enter postcode";
+        AddressMessageEnum["NO_POSTCODE_SELECTED"] = "Enter a valid postcode";
+        AddressMessageEnum["SELECT_ADDRESS"] = "Select an address";
     })(exports.AddressMessageEnum || (exports.AddressMessageEnum = {}));
 
     var AddressOption = /** @class */ (function () {
@@ -1045,7 +1046,7 @@
             return this.http
                 .get('/external/addresses?postcode=${postcode}'.replace('${postcode}', postcode), undefined)
                 .pipe(operators.map(function (res) { return res.results; }))
-                .pipe(operators.map(function (output) { return output.map(function (addresses) { return _this.format(new AddressParser().parse(addresses[AddressType.DPA])); }); }));
+                .pipe(operators.map(function (output) { return output ? output.map(function (addresses) { return _this.format(new AddressParser().parse(addresses[AddressType.DPA])); }) : []; }));
         };
         AddressService.prototype.format = function (addressModel) {
             return this.formatAddressLines(this.shiftAddressLinesUp(addressModel));
@@ -4853,9 +4854,15 @@
             this.addressesService = addressesService;
             this.internationalMode = false;
             this.submissionAttempted = false;
+            this.addressChosen = false;
             this.postcodeOptionSelected = new i0.EventEmitter();
             this.internationalModeStart = new i0.EventEmitter();
             this.ukAddressOptionSelected = new i0.EventEmitter();
+            // indicated what error to display to user
+            this.canSelectAddress = new i0.EventEmitter();
+            // tells parent to reset submission attempted field
+            // only relevant to when user re-clicks find address
+            this.resetSubmission = new i0.EventEmitter();
             this.addressField = {
                 addressLine1: '',
                 addressLine2: '',
@@ -4866,9 +4873,11 @@
                 county: ''
             };
             this.optionErrorsPresent = false;
-            this.addressChosen = false;
+            this.addressSelectable = false;
             this.missingPostcode = false;
             this.optionErrorMessage = exports.AddressMessageEnum.NO_OPTION_SELECTED;
+            this.postcodeErrorMessage = exports.AddressMessageEnum.NO_POSTCODE_SELECTED;
+            this.selectErrorMessage = exports.AddressMessageEnum.SELECT_ADDRESS;
         }
         WriteAddressFieldComponent.prototype.ngOnInit = function () {
             if (!this.formGroup.get('address')) {
@@ -4885,8 +4894,10 @@
         };
         WriteAddressFieldComponent.prototype.findAddress = function () {
             var _this = this;
+            this.resetSubmission.emit();
             if (!this.addressFormGroup.get('postcode').value) {
                 this.missingPostcode = true;
+                this.canSelectAddress.emit(false);
             }
             else {
                 this.missingPostcode = false;
@@ -4899,6 +4910,7 @@
                     });
                     _this.addressOptions.unshift(new AddressOption(undefined, _this.defaultLabel(_this.addressOptions.length)));
                 }, function (error) {
+                    // Edited this so that errors not produced if there are no results for a postcode
                     console.log("An error occurred retrieving addresses for postcode " + postcode_1 + ". " + error);
                     _this.addressOptions.unshift(new AddressOption(undefined, _this.defaultLabel(_this.addressOptions.length)));
                 });
@@ -4907,6 +4919,7 @@
         };
         WriteAddressFieldComponent.prototype.blankAddress = function () {
             this.setFormValue();
+            this.resetSubmission.emit();
             if (this.internationalMode) {
                 this.internationalModeStart.emit();
             }
@@ -4927,6 +4940,7 @@
             return hasAddress;
         };
         WriteAddressFieldComponent.prototype.addressSelected = function () {
+            this.missingPostcode = false;
             this.addressField = this.addressFormGroup.get('addressList').value;
             this.addressChosen = true;
             this.setFormValue();
@@ -4934,15 +4948,24 @@
         };
         WriteAddressFieldComponent.prototype.ngOnChanges = function (changes) {
             var addressChange = changes['addressField'];
+            var internationalChange = changes['isInternational'];
             if (addressChange) {
                 this.setFormValue();
             }
+            if (internationalChange && this.addressFormGroup && this.addressFormGroup.get('ukAddress')) {
+                this.addressFormGroup.get('ukAddress').patchValue(this.isInternational ? 'no' : 'yes');
+            }
+            if (!this.addressChosen && this.addressFormGroup && this.addressFormGroup.get('addressList')) {
+                // resets address options on internal back
+                this.addressFormGroup.get('addressList').patchValue(undefined);
+            }
             this.checkIfErrorsNeeded();
         };
         WriteAddressFieldComponent.prototype.checkIfErrorsNeeded = function () {
-            if (this.submissionAttempted && this.shouldShowDetailFields() && this.internationalMode && !this.addressChosen) {
+            if (this.submissionAttempted && this.internationalMode && !this.postcodeLookupVisible()) {
                 // ensure errors present when submission attmempted on international radio buttons
                 this.optionErrorsPresent = true;
+                this.optionErrorMessage = exports.AddressMessageEnum.NO_OPTION_SELECTED;
             }
             else {
                 this.optionErrorsPresent = false;
@@ -4956,7 +4979,16 @@
             this.isInternational = isInternational;
             this.ukAddressOptionSelected.emit(this.isInternational);
         };
+        WriteAddressFieldComponent.prototype.postcodeErrorPresent = function (isPostcodeField) {
+            var checkForField = isPostcodeField ? !this.addressSelectable : this.addressSelectable;
+            return this.submissionAttempted && checkForField;
+        };
+        WriteAddressFieldComponent.prototype.postcodeLookupVisible = function () {
+            return !this.shouldShowDetailFields() || (!this.startedInternational && !this.addressChosen);
+        };
         WriteAddressFieldComponent.prototype.defaultLabel = function (numberOfAddresses) {
+            this.addressSelectable = numberOfAddresses > 0 ? true : false;
+            this.canSelectAddress.emit(this.addressSelectable);
             return numberOfAddresses === 0 ? 'No address found'
                 : "" + numberOfAddresses + (numberOfAddresses === 1 ? ' address ' : ' addresses ') + "found";
         };
@@ -4970,8 +5002,8 @@
     WriteAddressFieldComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'xuilib-write-address-field',
-                    template: "<div class=\"govuk-form-group\" [formGroup]=\"addressFormGroup\" [ngClass]=\"{'govuk-form-group--error': optionErrorsPresent}\">\n  <p class=\"govuk-error-message\" *ngIf=\"optionErrorsPresent\">\n    <span class=\"govuk-visually-hidden\">Error:</span>{{optionErrorMessage}}\n  </p>\n  <div *ngIf=\"!shouldShowDetailFields() || (!startedInternational && !addressChosen)\">\n    <div class=\"govuk-form-group postcodeLookup\" id=\"addressLookup\"\n      [ngClass]=\"{'form-group-error': missingPostcode}\">\n      <label for=\"postcodeInput\">\n        <span class=\"govuk-label\"><b>Provide address details</b></span>\n        <span class=\"govuk-label\">Enter a UK postcode</span>\n      </label>\n      <span class=\"error-message\" *ngIf=\"missingPostcode\">Enter the Postcode</span>\n      <input type=\"text\" [ngClass]=\"{'govuk-input--error': missingPostcode}\" id=\"postcodeInput\" name=\"postcode\"\n        class=\"govuk-input govuk-!-width-two-thirds postcodeinput inline-block\" formControlName=\"postcode\">\n      <button type=\"button\" class=\"govuk-button\" (click)=\"findAddress()\">Find address</button>\n    </div>\n\n    <div class=\"govuk-form-group\" *ngIf=\"addressOptions\" id=\"selectAddress\">\n      <label class=\"govuk-label\" for=\"addressList\">\n        <span class=\"form-label\">Select an address</span>\n      </label>\n\n      <select class=\"form-control govuk-select ccd-dropdown addressList\" id=\"addressList\" name=\"address\"\n        formControlName=\"addressList\" (change)=\"addressSelected()\" focusElement>\n        <option *ngFor=\"let addressOption of addressOptions\" [ngValue]=\"addressOption.value\">\n          {{addressOption.description}}\n        </option>\n      </select>\n    </div>\n\n    <a class=\"manual-link govuk-link\" *ngIf=\"!shouldShowDetailFields() || (!startedInternational && !addressChosen)\" (click)=\"blankAddress()\"\n      href=\"javascript:void(0)\">I can't enter a UK postcode</a>\n  </div>\n\n  <div class=\"govuk-radios\" data-module=\"govuk-radios\"\n    *ngIf=\"shouldShowDetailFields() && internationalMode && startedInternational && !addressChosen\">\n    <div class=\"govuk-radios__item\">\n      <input class=\"govuk-radios__input\" id=\"yes\" value=\"yes\" name=\"ukAddress\" type=\"radio\" data-aria-controls=\"address-fields\"\n        (click)=\"setInternationalAddress(false)\" formControlName=\"ukAddress\">\n      <label class=\"govuk-label govuk-radios__label\" for=\"yes\">\n        Yes\n      </label>\n    </div>\n    <div class=\"govuk-radios__item\">\n      <input class=\"govuk-radios__input\" id=\"no\" value=\"no\" name=\"ukAddress\" type=\"radio\" data-aria-controls=\"address-fields\"\n        (click)=\"setInternationalAddress(true)\" formControlName=\"ukAddress\">\n      <label class=\"govuk-label govuk-radios__label\" for=\"no\">\n        No\n      </label>\n    </div>\n    <div class=\"govuk-radios__conditional\" id=\"address-fields\">\n      <xuilib-write-address-inputs *ngIf=\"isInternational !== undefined\" [formGroup]=\"formGroup\" [isInternational]=\"isInternational\"\n                                  [submissionAttempted]=\"submissionAttempted\">\n      </xuilib-write-address-inputs>\n    </div>\n  </div>\n\n  <xuilib-write-address-inputs *ngIf=\"shouldShowDetailFields() && (addressChosen || !internationalMode)\"\n    [formGroup]=\"formGroup\" [isInternational]=\"false\" [submissionAttempted]=\"submissionAttempted\"></xuilib-write-address-inputs>\n\n</div>",
-                    styles: [".manual-link{cursor:pointer;text-decoration:underline}.manual-link,:host{display:block}"]
+                    template: "<div class=\"govuk-form-group\" [formGroup]=\"addressFormGroup\" [ngClass]=\"{'govuk-form-group--error': optionErrorsPresent}\">\n  <p class=\"govuk-error-message\" *ngIf=\"optionErrorsPresent\">\n    <span class=\"govuk-visually-hidden\">Error:</span>{{optionErrorMessage}}\n  </p>\n  <div *ngIf=\"postcodeLookupVisible()\">\n    <div class=\"govuk-form-group postcodeLookup\" id=\"addressLookup\">\n      <label for=\"postcodeInput\">\n        <span class=\"govuk-label\"><b>Provide address details</b></span>\n        <span class=\"govuk-label\">Enter a UK postcode</span>\n      </label>\n      <div class=\"govuk-form-group\"\n      [ngClass]=\"{'govuk-form-group--error': missingPostcode || postcodeErrorPresent(true)}\">\n        <p class=\"govuk-error-message\" *ngIf=\"missingPostcode || postcodeErrorPresent(true)\">\n          <span class=\"govuk-visually-hidden\">Error:</span>{{postcodeErrorMessage}}\n        </p>\n        <input type=\"text\" [ngClass]=\"{'govuk-input--error': missingPostcode}\" id=\"postcodeInput\" name=\"postcode\"\n          class=\"govuk-input govuk-!-width-two-thirds postcodeinput inline-block\" formControlName=\"postcode\">\n        <button type=\"button\" class=\"govuk-button\" (click)=\"findAddress()\">Find address</button>\n      </div>\n    </div>\n\n    <div class=\"govuk-form-group\"\n     *ngIf=\"addressOptions\" id=\"selectAddress\">\n      <label class=\"govuk-label\" for=\"addressList\">\n        <span class=\"form-label\">Select an address</span>\n      </label>\n      <div class=\"govuk-form-group\"\n      [ngClass]=\"{'govuk-form-group--error': postcodeErrorPresent(false)}\">\n        <p class=\"govuk-error-message\" *ngIf=\"postcodeErrorPresent(false)\">\n          <span class=\"govuk-visually-hidden\">Error:</span>{{selectErrorMessage}}\n       </p>\n        <select class=\"form-control govuk-select ccd-dropdown addressList\" id=\"addressList\" name=\"address\"\n          formControlName=\"addressList\" (change)=\"addressSelected()\" focusElement>\n          <option *ngFor=\"let addressOption of addressOptions\" [ngValue]=\"addressOption.value\">\n            {{addressOption.description}}\n          </option>\n        </select>\n      </div>\n    </div>\n\n    <a class=\"manual-link govuk-link\" *ngIf=\"!shouldShowDetailFields() || (!startedInternational && !addressChosen)\" (click)=\"blankAddress()\"\n      href=\"javascript:void(0)\">I can't enter a UK postcode</a>\n  </div>\n\n  <div class=\"govuk-radios\" data-module=\"govuk-radios\"\n    *ngIf=\"shouldShowDetailFields() && internationalMode && startedInternational && !addressChosen\">\n    <div class=\"govuk-radios__item\">\n      <input class=\"govuk-radios__input\" id=\"yes\" value=\"yes\" name=\"ukAddress\" type=\"radio\" data-aria-controls=\"address-fields\"\n        (click)=\"setInternationalAddress(false)\" formControlName=\"ukAddress\">\n      <label class=\"govuk-label govuk-radios__label\" for=\"yes\">\n        Yes\n      </label>\n    </div>\n    <div class=\"govuk-radios__item\">\n      <input class=\"govuk-radios__input\" id=\"no\" value=\"no\" name=\"ukAddress\" type=\"radio\" data-aria-controls=\"address-fields\"\n        (click)=\"setInternationalAddress(true)\" formControlName=\"ukAddress\">\n      <label class=\"govuk-label govuk-radios__label\" for=\"no\">\n        No\n      </label>\n    </div>\n    <div class=\"govuk-radios__conditional\" id=\"address-fields\">\n      <xuilib-write-address-inputs *ngIf=\"isInternational !== undefined\" [formGroup]=\"formGroup\" [isInternational]=\"isInternational\"\n                                  [submissionAttempted]=\"submissionAttempted\">\n      </xuilib-write-address-inputs>\n    </div>\n  </div>\n\n  <xuilib-write-address-inputs *ngIf=\"shouldShowDetailFields() && (addressChosen || !internationalMode)\"\n    [formGroup]=\"formGroup\" [isInternational]=\"false\" [submissionAttempted]=\"submissionAttempted\"></xuilib-write-address-inputs>\n\n</div>",
+                    styles: [".manual-link{cursor:pointer;text-decoration:underline;margin-top:10px}.manual-link,:host{display:block}"]
                 },] }
     ];
     WriteAddressFieldComponent.ctorParameters = function () { return [
@@ -4983,9 +5015,12 @@
         isInternational: [{ type: i0.Input }],
         submissionAttempted: [{ type: i0.Input }],
         startedInternational: [{ type: i0.Input }],
+        addressChosen: [{ type: i0.Input }],
         postcodeOptionSelected: [{ type: i0.Output }],
         internationalModeStart: [{ type: i0.Output }],
-        ukAddressOptionSelected: [{ type: i0.Output }]
+        ukAddressOptionSelected: [{ type: i0.Output }],
+        canSelectAddress: [{ type: i0.Output }],
+        resetSubmission: [{ type: i0.Output }]
     };
 
     var WriteAddressInputsComponent = /** @class */ (function () {