🛠️ 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