🛠️ Potential Solutions

🧐 Assumptions

• We will turn the offer search editable

• It cannot take much time to show the offer searched

• We have to warn the user when the offer does not exist in the list

• It needs to search in the list every offer that contains any part of the name according to what was typed

✅ Proposed Solution

Solution #1

The first solution is allowing the offer name to be editable using a different component (AutoComplete) and when the offer is searched it will look for the offer comparing the name with what was typed.

To do this, you need to use a component that searches for the offer name based on each character typed.

const searchByOfferName =
    customer?.supportOffers?.filter(
      (offer) => offer?.name && offer?.name?.toLowerCase().includes(offerTemplate),
    );
    
return {
  ...
  <form onSubmit={handleSubmit}>
    <DialogContent>
      <Grid container spacing={2}>
        <Grid item xs={12}>
          <FormControl
            variant="outlined"
            className={classes.formControl}
            error={hasSubmitted && !offerTemplate}
          >
            {searchByOfferName && (
              <Autocomplete
                ...
              )}

For more references:

• POC: https://github.com/rbilabs/intl-admin-app/pull/591

✅ Pros:

• Quick implementation

Disregarding Solution

Solution #1

This solution allows the offer name to be still editable using a TextBox and when the offer is searched it will look for the offer by comparing the name with what was typed, in another component(Select) or a List that would render according to the list of offer available

Cons:

• Creation of more dependencies between component

• Use at least two components to do the same search instead of a specific one that does all the work

Solution #1.1

Use of regex to get any part of the text typed to compare to the list of offers to be assigned

Cons:

• Creation of a new constant to search offers names by anything typed instead of using native properties.

🧑‍🚒 QA Plan

Test Scenario	Result	Screenshots
Show entire offers list	When selecting the Search Ofer Input show full list of offers names
Show only offers with a specific character or words typed	After typing anything in the Search Ofer Input Show only offers with a specific character or words typed
Show warning error for inxestent offer in the list	After typing anything that it does not exist in any offer name in the Search Ofer Input Shows warning message: No results for "whatever was typed”