Page Comparison

Repos that we’ll change

...

• Motivation: the client wants to control freely the number of items. This will solve other business problems.

• Label: Quantity of free add-ons

• Description: (to be defined)

PATH FOR THE SOLUTION

• As we’ll have other options we’ll have something equal to the original options (with different names)

• The original option is referenced in the document using the schema for the options. We’ll need to do the same thing here

  

  • We’ll create our new fragment/object in the src/schemas/menu/objects

...

• Motivation: configure the add-ons free modal. The fieldset will help with the organization to group the fields

• Label: (to be defined)

• Description: (to be defined)

• Rules:

  • The fieldset should not be collapsed when appears (DOC)

  • All fields should be children of the fieldset

  • The fieldset should only be visible if the toggle for add-on free items is ON

...

• Modal toggle (to show/hide on the Whitelabel App):

  • Label: (to be defined)

  • Description: (to be defined)

• Modal title field

  • Label: (to be defined)

  • Description: (to be defined)

• Modal description field

  • Label: (to be defined)

  • Description: (to be defined)

• Modal primary button field

  • Label: (to be defined)

  • Description: (to be defined)

• Rules:

  • If the toggle is ON

    • The title and primary button should be filled in and are required. This is needed to prevent the user from publishing the document and to not show an empty modal on the Whitelabel App

    • Description and image fields are optional

...

• Rules:

  • The text for the title, description, and primary button (the orange one) will come from Sanity

  • The text for the secondary button will be fixed on the “Not Now” label. We’ll add this to the main en.json file and run the lokalize after that

  • If the image is not configured on Sanity the empty space should not be there

  • The modal should only be shown if

    • If the respective toggle from Sanity is ON

    • If we have on the cartEntries at least one menu item configured for the addon extra item that was added to the cart

  • If the user clicks on the primary button we’ll add all the items that come from Sanity into the cart

PATH FOR THE SOLUTION

• He has multiple examples of modals in the application (agreements modal, etc). I don’t see any component that will help us. The Dialog from ctg-components-library did not accept content from what I saw.

• For the architecture suggestion:

  • The idea is to have a new components folder for this new comp that will be responsible to deal with the modal

...

• Suggested props/interface for the new component

  Code Block
  language typescript
  interface IAddOnsFreeModal { cartEntries: ICartEntry[]; // this is necessary to know if we'll show the modal based in whats in the cart entries addOnSections: IAddOnSection[]; // another option is to receive the addon free from the parent directly addToCart: (items: IBaseItem) => void; }

• I think that the modal should be responsible for our internal state to know if will be shown or not and if we click on the addToCart we’ll run the handleAddToCart from the parent component

DOD-LIKE

• Respect all points from the Rules section

• Create the new component folder and necessary files

• Implement unit tests

• Validate the layout on: Web and native devices

Task 4: Add a description on the AddOnsItemsContainer section for the addon-free items

… WORK IN PROGRESS …