Lookup and validate record via Registration No. Validator component (Search component)

[euanmillar]

Description

As we add events. Countries want to pull in details from another record to ensure data quality and validate a registration exists.

This ticket is to create a component that can validate a registration no. (eg. BRN, DRN, MRN, ARN) and populate a form with any details from that registration.

Design

https://www.figma.com/design/W6Bty2ujZg29tv5CPWzCcd/OpenCRVS-Design-System....?node-id=2137-1910&t=YjNoQKYaZvrpZHiJ-1

ACs

GIVEN I am completing a declaration form configured to capture an {event} registration No.
WHEN I enter an invalid {event} registration No (too short - or failing regexp).
THEN show the form field error validation message "Invalid {{event}} number"

GIVEN I am completing a declaration form configured to capture an {event} registration No.
WHEN I enter an {event} registration No. AND click Confirm
THEN check it's a valid registration no.

BRN Form Population
GIVEN the {event} registration no, is valid.
THEN populate any fields i have configured to be populated

Checking how many times the reg no. was used in other event records (for the same individual type!)
Example: 1: BRN in a Marriage record for Groom
GIVEN the BRN registration no, is valid for the Groom in a Marriage record
THEN check how many time this BRN was used in another Marriage record for the Groom!
THEN show the result in a configured form field or text.

Example: 2: BRN for a Member in another Residence record
GIVEN the BRN registration no, is valid for a residence member
THEN check if this BRN was used in another Residence record for a member
THEN show the result in a configured form field or text.

Clearing a valid registration no.
GIVEN the {event} registration no, is valid.
WHEN i click Clear
THEN show confirmation model (*!Confirmation model copy heading and text is configurable per event)

Example model for Residence registration:

GIVEN I confirm i want to clear the registration no.
THEN empty all populated fields AND hide any previously hidden elements/fields

--

GIVEN the {event} registration no. is invalid.
THEN show the invalid error message. "Invalid {{event}} registration no. Please try again"

GIVEN it's taking X amount of time to get a response
THEN show the time out error "Unable to confirm {{event}} registration. Please ...? check your connection"

GIVEN I am completely offline
WHEN the user enters an {event} registration No.
THEN show the offline state

Dev tasks

• Review search component skeleton in [OCRVS-10131] Search component (Registration No. Validator) #10488
• Add missing UI in the search component based on the design. Note that the copy for different parts such as "Validating..." text must be configurable through configuration options of the input
  • Loading... indicator (configured as "Validating..." in the design, default text is "Searching...")
  • Confirm button next to the input (configured as "Confirm" in the design, default text is "Search")
  • HTTP error message
  • Offline message (Default: Search unavailable while offline)
  • Validation failed ("Invalid registration number" in the design", it might be good just to use the form field generator validation mechanism if possible)
  • OK text (Configured as "Valid" in the design, default text 'Found N results')
• Implement modal shown before data is cleared. Ensure dependent form fields (like DATA) are cleared out properly when clear is pressed
• Experiment disabling the component after it has received data. Do this only via country config configuration.

      conditionals: [
        {
          type: ConditionalType.ENABLE,
          conditional: and(
            field('birth.nid-search').get('data').isFalsy(),
            field('birth.nid-search').get('loading').isFalsy()
          )
        }
      ],