Adding a custom homepage updates required

[ghost]

Type: minor

Describe the bug
The changes in release reactioncommerce/example-storefront#688 will invalidate the current documentation. Need to remove the MobX dep, replace decorators with composition, switch to using useApollo HOC and add getStaticProps and getStaticPaths exports to home.js. Also, with the routing changes made for the new i18nRouter the routing instructions need to be updated.

I was able to ad lib with what's there now to create a new homepage but it's not clear how to adjust the router now so the homepage appears at the shop base url.

To Reproduce
Steps to reproduce the behavior:

1. Checkout the release-next-v3.2.0 branch of example-storefront.
2. Follow the usage instructions docker-comose.dev.yml
3. Attempt to follow the steps in Adding a custom homepage
4. Observe the steps are out of date based on refactoring from Storefront v2 example-storefront#667

Expected behavior
Documentation is updated to reflect refactoring upon release

Depends on
reactioncommerce/example-storefront#703
reactioncommerce/example-storefront#704

[ghost]

Here's a functoinal home.js which can be used in the docs as a drop-in replacement:

import React, { Component } from "react";
import PropTypes from "prop-types";
import inject from "hocs/inject";
import Helmet from "react-helmet";
import HomePage from "custom/components/HomePage";
import Layout from "components/Layout";
import { withApollo } from "lib/apollo/withApollo";

import { locales } from "translations/config";
import fetchPrimaryShop from "staticUtils/shop/fetchPrimaryShop";
import fetchTranslations from "staticUtils/translations/fetchTranslations";

class Home extends Component {
  static propTypes = {
    routingStore: PropTypes.object,
    shop: PropTypes.shape({
      currency: PropTypes.shape({
        code: PropTypes.string.isRequired
      })
    })
  };

  render() {
    const { shop } = this.props;

    return (
      <Layout shop={shop}>
        <Helmet
          title={shop && shop.name}
          meta={[{ name: "description", content: shop && shop.description }]}
        />
        <HomePage />
      </Layout>
    );
  }
}

/**
 *  Static props for the cart
 *
 * @returns {Object} the props
 */
export async function getStaticProps({ params: { lang } }) {
  return {
    props: {
      ...await fetchPrimaryShop(lang),
      ...await fetchTranslations(lang, ["common"])
    }
  };
}

/**
 *  Static paths for the cart
 *
 * @returns {Object} the paths
 */
export async function getStaticPaths() {
  return {
    paths: locales.map((locale) => ({ params: { lang: locale } })),
    fallback: false
  };
}

export default withApollo()(inject("routingStore")(Home));

Note with the introduction of i18n this now goes in pages/[lang] and not pages and this code will change again after Depends on refactorings completed.