[Solution] Admin tool - offer assignment improvement

Owned by Pereira, Filipa
Last updated: Aug 20, 2024 by Raphael Ferreira Gomes
5 min read

Document Status

reviewED

Document Owner(s)

@Macedo Ferreira, Samuel

Reviewers

@Raphael Ferreira Gomes
@Francisco Paglia
@Tadayoshi Mendes Doy, Bruno
@Augusto Romao, Vinicius
@Lopes da Costa, Valentina
@Coelho, Jonatas

 

Figma: https://www.figma.com/design/Ti8Qr6jeSEPaencIDyYfcJ/branch/kkzpRKpMDKEFEGUxL8u6ZF/Burger-King?node-id=1961-23965&t=9f12SqJkbOC0k6nR-0

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 appear on the list.

  • It needs to search in the list for every offer containing at least three characters of the name in any part (beginning, middle, ending) according to what was typed.

    • Space won’t count as a character to the three characters limitation

  • The searching will not be case-sensitive, therefore the user may type both uppercase and lowercase letters

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

  • It is not assured if there are offers where the first word has only two characters, but it is not common, therefore for such cases, we will treat with the three-character limitation

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:

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

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.

 

Screenshot 2024-08-01 at 10.49.30.png

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.

     

Screenshot 2024-08-01 at 10.48.01.png

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".

 

Specific search scenarios

For the following scenarios we are going to consider that there’s just one offer name to be searched: Ice Brioche And Drink

Search Scenario

Result

Search Scenario

Result

"ic e"

The space will break the word, and it will look for any offer that has its name in any part of it "ic" nd the next word starting with "e"  => No results for "ic e"

"ice"

It will look for any offer that has its name in any part of it "ice" => Ice Brioche And Drink

"nd "

It won't look for any offer, because it didn't reach the 3 characters limitation =>  No results for "nd "

"nd d"

The space will break the word, and it will look for any offer that has its name in any part of it "nd" and the next word starting with "d" => Ice Brioche And Drink

"iceb"

It will look for any offer that has its name in any part of it "iceb" => No results for "iceb

"iC e"

The space will break the word, and it will look for any offer that has its name in any part of it "ic" nd the next word starting with "e" => No results for "ic e"

"ND d"

The space will break the word, and it will look for any offer that has its name in any part of it "nd" and the next word starting with "d" => Ice Brioche And Drink

Tasks Breaking Down

Task 1 - Create a feature flag

  • Create enable-search-assigned-offers feature flag

    • it is not the same way it is done in whitelabel: in this repository a mutation brings the value and GraphQL integrates with Launchdarkly

Task 2 - Integrate AutoComplete with feature flag

  • When enable-search-assigned-offers feature flag is enabled, replace inoffer-form.tsx OfferTemplate Input Label and Select for an AutoComplete component

    • add the flag to offers container

    • create tests from container

    • update test from offers-form

Task 3 - Add AutoComplete Material UI Component

  • Replace inoffer-form.tsx OfferTemplate Input Label and Select for an AutoComplete component

    • get all offer names by whatever was typed considering the requirements

    • add a warning message for when there aren’t any offer names by whatever was typed

    • update tests

  • References: https://v4.mui.com/api/autocomplete/#autocomplete-api