TODO:

1. NEED CAITLIN HELP Add Metafields app to WH shopify account
2. NEED CAITLIN HELP add maxQuantity and about metafields for each product
3. DONE: Change Google API to only whidbey-herbal and dbridenbeck.github domains (IMPORTANT! TEST THIS!)
4. DONE: Update "About" photo
5. DONE: Test newsletter subscription
6. HAVE CAITLIN DO!: Create Recipes on Caitlin's blog
7. DONE: Move NavPanel down to not overlap with header
8. NEED CAITLIN HELP!: Swap Storefront API creds with mine
9. NEED CAITLIN HELP!: Test checkout process with WH implemented storefront creds
10. DONE: Create Featured-Products collection and pre-populate it for caitlin, have them edit it
11. NEED CAITLIN HELP: Expose metafields on Storefront API

Steps to reproduce issue:

1. Add items to cart
2. Click "proceed to checkout" button
3. Click back on browser
4. update items in cart
5. Click "proceed to checkout" button again

expected behavior: items in shopify checkout should reflect what was submitted in step 4
Actual behavior: after step 5 items from step #2 are still in the shopify checkout

1. Organize pages into folders with components
2. Create a "shared components" folder
3. Find areas to break repetitive styled components that can be shared (h1, h2, p, wrapper, etc.)
4. review each component:

• check for redundancies in jsx
• create curried functions when necessary
• call actions correctly using this.props.action = this.action (or whatever it is that was?)
• review styled components for terseness

See instructions on migration here: https://www.npmjs.com/package/@react-google-maps/api

This seems overly complex and is only used to control the navpanel slider on mobile. Perhaps there is another way to do this to simplify the codebase.

remove componentDidMount and refactor goToShopifyCheckout with something resembling the below. result is that the checkoutId is only ever created when checkout button is clicked.

const createIdAndCheckout = () => 
  client.checkout.create()
    .then(checkout => checkout.id)
    .then(checkoutId =>
      (client.checkout.addLineItems(checkoutId, lineItemsToAdd))
    .then(checkout => {
      window.location.href = checkout.webUrl;
    })
    .catch(error => console.log("Error creating ID and Checking Out: ", error))
  );

TODO:

1. Figure out what to do with SharedComponents/Products color blocking
2. Style WelcomeImage
3. Style navbar
4. Adjust wrapper padding/margins to look correct

Need to identify the root issue with this. I suspect it has to do with how I'm using root.js