...

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.

...

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

...

💰 Cost

🎛️ Configuration

📈 Metrics

🗓️ Delivery Plan

🧑‍🚒 QA Plan

⚠️ Call-outs

...

Cons:

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

🧑‍🚒 QA Plan