🛠️ Potential Solutions

🧐 Assumptions

• We will turn the offer search editable, allowing the user to type the offer name.

• 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 for every offer that contains at least three characters of the name in any part of it (beginning, middle, ending) according to what was typed.

• It should consider every character typed as lowercase to search in the list.

  • Space won’t count as a character.

• It should always show Sanity offer in an increasing alphabetical order.

• It should have a temporary feature flag to ensure everything is working fine, such as enable-search-assigned-offers.

✅ Proposed Solution

Solution #1

The first solution is allowing the offer name to be editable using a different component (AutoComplete). When the Sanity offer is searched, it will look for the offer by 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 = () => {
    if (!offerTemplate) {
      return customer.supportOffers.filter((offer) => offer);
    }

    return (
      customer?.supportOffers?.filter(
        (offer) =>
          offer?.name &&
          offerTemplate.length > 2 &&
          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. When the offer is searched, it will look for the Sanity offer by comparing the name with what was typed, in another component (Select) or a List that would render according to the list of offers available.

Cons:

• The creation of more dependencies between components

• 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:

• The creation of a new constant to search offers names based on what was typed instead of using native properties.

🧑‍🚒 QA Plan

Test Scenario	Result	Screenshots
Show the entire offers list	When selecting the Search Ofer Input. Show a full list of Sanity offers names in a increasing alphabetical order.
Show only offers with a specific character or words typed	After typing at least three characters in the Search Offer Input that exists in some offer name. Show only Sanity offers with specific characters or words typed in an increasing alphabetical order.
Show a warning error for absent offer in the list	After typing at least three characters that do not exist in any Sanity offer name in the Search Offer Input. Shows warning message: No results for "whatever was typed".