🛠️ Potential Solutions

✅ Proposed Solution

...

🧐 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 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
                ...
              )}

✅ Pros:

• Quick implementation

Potential Challenges

...