fix: clear a user's cart after placing an order, and remove MiniCart popper from order completed page.

src/containers/order/withPlaceStripeOrder.js

@@ -13,7 +13,7 @@ import { placeOrderWithStripeCardPayment } from "./mutations.gql";
  */
 export default (Component) => (
   @withApollo
-  @inject("authStore", "cartStore", "routingStore")
+  @inject("authStore", "cartStore", "uiStore", "routingStore")
   @observer
   class WithPlaceStripeOrder extends React.Component {
     static propTypes = {
@@ -31,7 +31,7 @@ export default (Component) => (
     }
 
     handlePlaceOrderWithStripeCard = async (order) => {
-      const { authStore, cartStore, client: apolloClient } = this.props;
+      const { authStore, cartStore, uiStore, client: apolloClient } = this.props;
       const { fulfillmentGroups } = order;
       const { stripeToken: { billingAddress } } = cartStore;
 
@@ -63,6 +63,7 @@ export default (Component) => (
       // If success
       if (data && !error) {
         const { placeOrderWithStripeCardPayment: { orders, token } } = data;
+        uiStore.closeCart();
 
         // Clear anonymous cart
         if (!authStore.isAuthenticated) {

src/pages/checkoutComplete.js

@@ -1,13 +1,15 @@
 import React, { Component, Fragment } from "react";
 import PropTypes from "prop-types";
 import { Router } from "routes";
-import { observer } from "mobx-react";
+import { inject, observer } from "mobx-react";
 import Helmet from "react-helmet";
 import { withStyles } from "@material-ui/core/styles";
 import Typography from "@material-ui/core/Typography";
 import withOrder from "containers/order/withOrder";
 import OrderFulfillmentGroups from "components/OrderFulfillmentGroups";
 import withCart from "containers/cart/withCart";
+import { withApollo } from "react-apollo";
+import { accountCartByAccountIdQuery } from "../containers/cart/queries.gql";
 
 const styles = (theme) => ({
   sectionHeader: {
@@ -70,59 +72,70 @@ const styles = (theme) => ({
   }
 });
 
+@withApollo
 @withOrder
 @withCart
+@inject("authStore", "uiStore")
 @observer
 @withStyles(styles, { withTheme: true })
 class CheckoutComplete extends Component {
   static propTypes = {
+    authStore: PropTypes.object.isRequired,
     classes: PropTypes.object,
+    client: PropTypes.object.isRequired,
     hasMoreCartItems: PropTypes.bool,
     isLoading: PropTypes.bool,
     loadMoreCartItems: PropTypes.func,
     onChangeCartItemsQuantity: PropTypes.func,
     onRemoveCartItems: PropTypes.func,
     order: PropTypes.object,
-    refetchCart: PropTypes.func.isRequired,
     shop: PropTypes.shape({
       name: PropTypes.string.isRequired,
       description: PropTypes.string
     }),
     theme: PropTypes.object.isRequired
   };
 
-  state = {}
+  state = {};
 
   componentDidMount() {
-    const { refetchCart } = this.props;
+    const {
+      authStore,
+      client: { cache },
+      shop
+    } = this.props;
 
-    refetchCart();
+    if (authStore.isAuthenticated) {
+      // Clear user's cart
+      cache.writeQuery({
+        query: accountCartByAccountIdQuery,
+        data: { cart: null },
+        variables: {
+          accountId: authStore.accountId,
+          shopId: shop._id
+        }
+      });
+    }
   }
 
-  handleCartEmptyClick = () => Router.pushRoute("/")
+  handleCartEmptyClick = () => Router.pushRoute("/");
 
   renderFulfillmentGroups() {
-    const {
-      classes,
-      order,
-      isLoading
-    } = this.props;
+    const { classes, order, isLoading } = this.props;
 
     if (isLoading) return null;
 
     return (
       <div className={classes.flexContainer}>
         <div className={classes.fulfillmentGroups}>
-          <OrderFulfillmentGroups
-            order={order}
-          />
+          <OrderFulfillmentGroups order={order} />
         </div>
       </div>
     );
   }
 
   render() {
-    const { classes, shop, order } = this.props;
+    const { classes, order, shop } = this.props;
 
     return (
       <Fragment>
@@ -134,13 +147,17 @@ class CheckoutComplete extends Component {
           <div className={classes.orderDetails}>
             <section className={classes.section}>
               <header className={classes.sectionHeader}>
-                <Typography className={classes.title} variant="title">{"Thank you for your order"}</Typography>
-                <Typography variant="body1">{"Your order ID is"} <strong>{order && order._id}</strong></Typography>
-                <Typography variant="body1">{"We've sent a confirmation email to"} <strong>{order && order.email}</strong></Typography>
+                <Typography className={classes.title} variant="title">
+                  {"Thank you for your order"}
+                </Typography>
+                <Typography variant="body1">
+                  {"Your order ID is"} <strong>{order && order._id}</strong>
+                </Typography>
+                <Typography variant="body1">
+                  {"We've sent a confirmation email to"} <strong>{order && order.email}</strong>
+                </Typography>
               </header>
-              <div className={classes.checkoutContent}>
-                {this.renderFulfillmentGroups()}
-              </div>
+              <div className={classes.checkoutContent}>{this.renderFulfillmentGroups()}</div>
             </section>
           </div>
         </div>