Ba/feature/add cart button

[bradleyandrick]

Related Issue(s):

• NA

Proposed Changes:

1. Add cart button to search bar if config set to true
2. Add base of cart modal component

BONUS 1: fixed legend style bug - it now does not float high if no publish/launch/analyze buttons are present

BOUNS 2: refactor of responsiveness for mid and small size screens (first pass to resolve glaring issues, better refactor recommended for future ticket)

Before BOUNS 2:

After BOUNS 2:

To test:

all tests pass 🍏 npm run test

Tests for Cart Button

• set CART_ENABLED to false in config.json
• load app
• confirm cart button does not render
• stop app
• set CART_ENABLED to true in config.json
• load app
• confirm cart button renders in search bar
• confirm cart button reflects initial state of '0' items in cart
• confirm cart style is grey/disabled per mock
• click cart button
• confirm cart button click does not open cart modal
• stop app
• open mainSlice.js in editor (src/redux/slices/mainSlice.js)
• change cartItems: [] on line 36 to be cartItems: [{id: 'test'}] to manually mock items in cart
• load app
• confirm cart button reflects cart state of '1' items in cart
• confirm cart style is no longer disabled and renders green per mock
• click cart button
• confirm cart button click opens cart modal
• click 'x' in top right of cart modal
• confirm cart modal closes

Tests for Bonus 1

• load app
• make sure SHOW_PUBLISH_BTN is true in config.json AND/OR ANALYZE_BTN_URL AND/OR LAUNCH_URL set
• search so results show on map
• confirm legend renders above publish button
• stop app
• set SHOW_PUBLISH_BTN to false in config.json
• remove or set to null for both ANALYZE_BTN_URL AND LAUNCH_URL in config.json
• load app
• search so results show on map
• confirm legend renders lower in bottom left when publish, analyze or launch buttons not in app

PR Checklist:

• [X] I have added my changes to the CHANGELOG or a CHANGELOG entry is not required.

[bradleyandrick]

RE: changelog note:

Added

• Cart button added to search bar if CART_ENABLED set to true in config.json (WIP feature)

it's already in readme. I updated this note to be more clear

[stephenkilbourn]

this looks good, but a suggestion on line 294 of src/components/Search/Search.css to make that flex-direction: row for mobile.

@media screen and (max-width: 975px) {

  .secondSearchItemsGroup {
    width: 100%;
    flex-direction: row;
  }

keeping the column feels like a lot of extra space vs this:

[bradleyandrick]

this looks good, but a suggestion on line 294 of src/components/Search/Search.css to make that flex-direction: row for mobile.

@media screen and (max-width: 975px) {

  .secondSearchItemsGroup {
    width: 100%;
    flex-direction: row;
  }

keeping the column feels like a lot of extra space vs this:

updated to change to flex-direction: row between 975 down to 600 then added another tag to go back to flex-direction: column below that