release v2.9.0

.circleci/config.yml

@@ -10,18 +10,14 @@ version: 2
 # typing. See http://yaml.org/type/merge.html for details.
 defaults: &defaults
   environment:
-    CI_SCRIPTS: 'npx --quiet --package @reactioncommerce/ci-scripts@1.6.2'
-    DOCKER_REPOSITORY: "reactioncommerce/example-storefront"
-    DOCKER_NAMESPACE: "reactioncommerce"
-    DOCKER_NAME: "example-storefront"
-    GLOBAL_CACHE_VERSION: "v3"
-    KUSTOMIZE_VERSION: "3.2.1"
-    HUB_VERSION: "2.12.8"
-    GH_USERNAME: "rc-circleci"
-    GH_EMAIL: "circleci@reactioncommerce.com"
-    REACTION_GITOPS_REVIEWERS: "griggheo"
+    - CI_SCRIPTS: "npx --quiet --package @reactioncommerce/ci-scripts@1.9.1"
+    - DOCKER_REPOSITORY: "reactioncommerce/example-storefront"
+    - DOCKER_NAME: "example-storefront"
+    - GLOBAL_CACHE_VERSION: “v3”
+    - SERVICE: "reaction-storefront"
+    - REACTION_GITOPS_REVIEWERS: "wistonk,griggheo"
   docker:
-    - image: circleci/node:12.11.1-stretch
+    - image: circleci/node:12-stretch
 
 jobs:
   install-dependencies:
@@ -94,35 +90,7 @@ jobs:
       - run:
           name: Clone reaction-gitops repo and create PR
           command: |
-            # Download kustomize
-            cd /tmp
-            wget https://github.com/kubernetes-sigs/kustomize/releases/download/kustomize%2Fv${KUSTOMIZE_VERSION}/kustomize_kustomize.v${KUSTOMIZE_VERSION}_linux_amd64
-            sudo mv kustomize_kustomize.v${KUSTOMIZE_VERSION}_linux_amd64 /usr/local/bin/kustomize
-            sudo chmod +x /usr/local/bin/kustomize
-            # Download hub
-            wget https://github.com/github/hub/releases/download/v${HUB_VERSION}/hub-linux-amd64-${HUB_VERSION}.tgz
-            tar xfz hub-linux-amd64-${HUB_VERSION}.tgz
-            sudo mv hub-linux-amd64-${HUB_VERSION}/bin/hub /usr/local/bin/hub
-            sudo chmod +x /usr/local/bin/hub
-            # Clone reaction-gitops repo and configure username and email for signing off commits
-            export GITHUB_TOKEN="${REACTION_GITOPS_GH_TOKEN}"
-            /usr/local/bin/hub clone https://${GITHUB_TOKEN}@github.com/reactioncommerce/reaction-gitops.git
-            cd reaction-gitops
-            /usr/local/bin/hub config user.name "${GH_USERNAME}"
-            /usr/local/bin/hub config user.email "${GH_EMAIL}"
-            cd kustomize/reaction-storefront/overlays/staging
-            # Create new branch
-            /usr/local/bin/hub checkout -b update-image-reaction-storefront-${CIRCLE_SHA1}
-            # Modify image tag in kustomization.yaml by calling 'kustomize edit set image'
-            /usr/local/bin/kustomize edit set image docker.io/${DOCKER_REPOSITORY}:${CIRCLE_SHA1}
-            /usr/local/bin/hub add kustomization.yaml
-            # Commit with sign-off
-            /usr/local/bin/hub commit -s -m "changed reaction-storefront image tag to ${CIRCLE_SHA1}"
-            # Push branch to origin
-            /usr/local/bin/hub push --set-upstream origin update-image-reaction-storefront-${CIRCLE_SHA1}
-            # Create PR
-            /usr/local/bin/hub pull-request --no-edit -r ${REACTION_GITOPS_REVIEWERS}
-
+            ${CI_SCRIPTS} automate-gitops-pull-request
 workflows:
   version: 2
   build_and_test:
@@ -144,6 +112,7 @@ workflows:
             - eslint
             - test-unit
       - create-gitops-pull-request:
+          context: reaction-gitops
           requires:
             - docker-build-push
           filters:

CHANGELOG.md

@@ -1,3 +1,7 @@
+# v2.9.0
+
+Example Storefront v2.9.0 is a minor update to keep this project in sync with [Reaction v2.9.0](https://github.com/reactioncommerce/reaction) and [reaction-hydra v2.9.0](https://github.com/reactioncommerce/reaction-hydra)
+
 # v2.8.1
 
 Example Storefront v2.8.1 is a patch update to keep this project in sync with [Reaction v2.8.1](https://github.com/reactioncommerce/reaction) and [reaction-hydra v2.8.1](https://github.com/reactioncommerce/reaction-hydra)

package.json

@@ -1,6 +1,6 @@
 {
   "name": "example-storefront",
-  "version": "2.8.1",
+  "version": "2.9.0",
   "description": "The Example Storefront serves as a reference for implementing a web based storefront using the Reaction Commerce GraphQL API.",
   "main": "./src/server.js",
   "keywords": [],

src/components/CartPopover/CartPopover.js

@@ -90,10 +90,6 @@ class CartPopover extends Component {
            */
         value: PropTypes.string
       })),
-      /**
-       * Current stock quantity of item
-       */
-      currentQuantity: PropTypes.number,
       /**
        * Image url of chosen item
        */

src/components/CartPopover/CartPopover.test.js

@@ -16,7 +16,6 @@ const cartItem = {
       value: "Summer"
     }
   ],
-  currentQuantity: 10,
   imageUrl: "//placehold.it/100",
   isLowInventoryQuantity: false,
   price: {

src/components/CheckoutSummary/CheckoutSummary.test.js

@@ -28,11 +28,11 @@ const testCart = {
       compareAtPrice: {
         displayAmount: "$45.00"
       },
-      currentQuantity: 3,
       imageURLs: {
         small: "//placehold.it/150",
         thumbnail: "//placehold.it/100"
       },
+      currentQuantity: 3,
       isLowQuantity: true,
       price: {
         displayAmount: "$20.00"
@@ -48,11 +48,11 @@ const testCart = {
         { label: "Color", value: "Black" },
         { label: "Size", value: "10" }
       ],
-      currentQuantity: 500,
       imageURLs: {
         small: "//placehold.it/150",
         thumbnail: "//placehold.it/100"
       },
+      currentQuantity: 30,
       isLowQuantity: false,
       price: {
         displayAmount: "$78.00"

src/components/MediaGallery/MediaGallery.test.js

@@ -4,7 +4,6 @@ import MediaGallery from "./MediaGallery";
 
 const mediaItems = [
   {
-    toGrid: 1,
     priority: 0,
     productId: "cmVhY3Rpb24vcHJvZHVjdDpCQ1RNWjZIVHhGU3BwSkVTaw==",
     variantId: "cmVhY3Rpb24vcHJvZHVjdDo2cWlxUHdCa2VKZHRkUWM0Rw==",
@@ -17,7 +16,6 @@ const mediaItems = [
     }
   },
   {
-    toGrid: 1,
     priority: 0,
     productId: "cmVhY3Rpb24vcHJvZHVjdDpCQ1RNWjZIVHhGU3BwSkVTaw==",
     variantId: "cmVhY3Rpb24vcHJvZHVjdDo2cWlxUHdCa2VKZHRkUWM0Rw==",

src/components/MediaGalleryItem/MediaGalleryItem.test.js

@@ -3,7 +3,6 @@ import renderer from "react-test-renderer";
 import MediaGalleryItem from "./MediaGalleryItem";
 
 const media = {
-  toGrid: 1,
   priority: 0,
   productId: "cmVhY3Rpb24vcHJvZHVjdDpCQ1RNWjZIVHhGU3BwSkVTaw==",
   variantId: "cmVhY3Rpb24vcHJvZHVjdDo2cWlxUHdCa2VKZHRkUWM0Rw==",

src/components/OrderCard/OrderCard.test.js

@@ -33,11 +33,11 @@ const order = {
             compareAtPrice: {
               displayAmount: "$45.00"
             },
-            currentQuantity: 3,
             imageURLs: {
               small: "//placehold.it/150",
               thumbnail: "//placehold.it/100"
             },
+            inventoryAvailableToSell: 3,
             isLowQuantity: true,
             price: {
               displayAmount: "$20.00"
@@ -50,11 +50,11 @@ const order = {
           {
             _id: "456",
             attributes: [{ label: "Color", value: "Black" }, { label: "Size", value: "10" }],
-            currentQuantity: 500,
             imageURLs: {
               small: "//placehold.it/150",
               thumbnail: "//placehold.it/100"
             },
+            inventoryAvailableToSell: 30,
             isLowQuantity: false,
             price: {
               displayAmount: "$78.00"

src/components/OrderCardFulfillmentGroup/OrderCardFulfillmentGroup.js

@@ -70,12 +70,19 @@ class OrderCardFulfillmentGroup extends Component {
     const { classes, fulfillmentGroup } = this.props;
 
     if (fulfillmentGroup && Array.isArray(fulfillmentGroup.items.nodes)) {
+      const items = fulfillmentGroup.items.nodes.map((item) => ({
+        ...item,
+        // Backwards compatibility until all component library components are updated
+        // to accept `inventoryAvailableToSell`.
+        currentQuantity: item.currentQuantity || item.inventoryAvailableToSell
+      }));
+
       return (
         <Grid className={classes.fulfillmentGroupDetails} item xs={12} md={12}>
           <CartItems
             isMiniCart
             isReadOnly
-            items={fulfillmentGroup.items.nodes}
+            items={items}
           />
         </Grid>
       );

src/components/OrderCardFulfillmentGroup/OrderCardFulfillmentGroup.test.js

@@ -23,11 +23,11 @@ const testFulfillmentGroup = {
         compareAtPrice: {
           displayAmount: "$45.00"
         },
-        currentQuantity: 3,
         imageURLs: {
           small: "//placehold.it/150",
           thumbnail: "//placehold.it/100"
         },
+        inventoryAvailableToSell: 3,
         isLowQuantity: true,
         price: {
           displayAmount: "$20.00"
@@ -40,11 +40,11 @@ const testFulfillmentGroup = {
       {
         _id: "456",
         attributes: [{ label: "Color", value: "Black" }, { label: "Size", value: "10" }],
-        currentQuantity: 500,
         imageURLs: {
           small: "//placehold.it/150",
           thumbnail: "//placehold.it/100"
         },
+        inventoryAvailableToSell: 30,
         isLowQuantity: false,
         price: {
           displayAmount: "$78.00"

src/components/OrderFulfillmentGroup/OrderFulfillmentGroup.js

@@ -67,6 +67,13 @@ class OrderFulfillmentGroup extends Component {
     const { classes, fulfillmentGroup, hasMoreCartItems, loadMoreCartItems } = this.props;
 
     if (fulfillmentGroup && Array.isArray(fulfillmentGroup.items.nodes)) {
+      const items = fulfillmentGroup.items.nodes.map((item) => ({
+        ...item,
+        // Backwards compatibility until all component library components are updated
+        // to accept `inventoryAvailableToSell`.
+        currentQuantity: item.currentQuantity || item.inventoryAvailableToSell
+      }));
+
       return (
         <div className={classes.fulfillmentDetails}>
           <Grid item xs={12}>
@@ -75,7 +82,7 @@ class OrderFulfillmentGroup extends Component {
               isReadOnly
               hasMoreCartItems={hasMoreCartItems}
               onLoadMoreCartItems={loadMoreCartItems}
-              items={fulfillmentGroup.items.nodes}
+              items={items}
               onChangeCartItemQuantity={this.handleItemQuantityChange}
               onRemoveItemFromCart={this.handleRemoveItem}
             />

src/components/OrderFulfillmentGroup/OrderFulfillmentGroup.test.js

@@ -23,11 +23,11 @@ const testFulfillmentGroup = {
         compareAtPrice: {
           displayAmount: "$45.00"
         },
-        currentQuantity: 3,
         imageURLs: {
           small: "//placehold.it/150",
           thumbnail: "//placehold.it/100"
         },
+        inventoryAvailableToSell: 3,
         isLowQuantity: true,
         price: {
           displayAmount: "$20.00"
@@ -40,11 +40,11 @@ const testFulfillmentGroup = {
       {
         _id: "456",
         attributes: [{ label: "Color", value: "Black" }, { label: "Size", value: "10" }],
-        currentQuantity: 500,
         imageURLs: {
           small: "//placehold.it/150",
           thumbnail: "//placehold.it/100"
         },
+        inventoryAvailableToSell: 30,
         isLowQuantity: false,
         price: {
           displayAmount: "$78.00"

src/components/OrderSummary/OrderSummary.test.js

@@ -23,7 +23,6 @@ const testFulfillmentGroup = {
         compareAtPrice: {
           displayAmount: "$45.00"
         },
-        currentQuantity: 3,
         imageURLs: {
           small: "//placehold.it/150",
           thumbnail: "//placehold.it/100"
@@ -40,7 +39,6 @@ const testFulfillmentGroup = {
       {
         _id: "456",
         attributes: [{ label: "Color", value: "Black" }, { label: "Size", value: "10" }],
-        currentQuantity: 500,
         imageURLs: {
           small: "//placehold.it/150",
           thumbnail: "//placehold.it/100"

src/components/ProductDetail/ProductDetail.test.js

@@ -2,6 +2,8 @@ import React from "react";
 import renderer from "react-test-renderer";
 import { MuiThemeProvider } from "@material-ui/core/styles";
 import { Provider } from "mobx-react";
+import { ComponentsProvider } from "@reactioncommerce/components-context";
+import components from "custom/componentsContext";
 import theme from "custom/reactionTheme";
 import ProductDetail from "./ProductDetail";
 import sampleData from "./__mocks__/productData.mock";
@@ -43,11 +45,13 @@ const uiStore = {
 
 test("basic snapshot", () => {
   const component = renderer.create((
-    <MuiThemeProvider theme={theme}>
-      <Provider primaryShopId="J8Bhq3uTtdgwZx3rz" routingStore={routingStore} tags={tags} uiStore={uiStore}>
-        <ProductDetail product={sampleData} shop={shop} currencyCode={"USD"} />
-      </Provider>
-    </MuiThemeProvider>
+    <ComponentsProvider value={components}>
+      <MuiThemeProvider theme={theme}>
+        <Provider primaryShopId="J8Bhq3uTtdgwZx3rz" routingStore={routingStore} tags={tags} uiStore={uiStore}>
+          <ProductDetail product={sampleData} shop={shop} currencyCode={"USD"} />
+        </Provider>
+      </MuiThemeProvider>
+    </ComponentsProvider>
   ));
   const tree = component.toJSON();
   expect(tree).toMatchSnapshot();

src/components/ProductDetail/__mocks__/productData.mock.js

@@ -168,7 +168,6 @@ export default {
   ],
   media: [
     {
-      toGrid: 1,
       priority: 0,
       productId: "cmVhY3Rpb24vcHJvZHVjdDpCQ1RNWjZIVHhGU3BwSkVTaw==",
       variantId: "cmVhY3Rpb24vcHJvZHVjdDo2cWlxUHdCa2VKZHRkUWM0Rw==",
@@ -181,7 +180,6 @@ export default {
       }
     },
     {
-      toGrid: 1,
       priority: 0,
       productId: "cmVhY3Rpb24vcHJvZHVjdDpCQ1RNWjZIVHhGU3BwSkVTaw==",
       variantId: "cmVhY3Rpb24vcHJvZHVjdDo2cWlxUHdCa2VKZHRkUWM0Rw==",
@@ -194,7 +192,6 @@ export default {
       }
     },
     {
-      toGrid: 1,
       priority: 0,
       productId: "cmVhY3Rpb24vcHJvZHVjdDpCQ1RNWjZIVHhGU3BwSkVTaw==",
       variantId: "cmVhY3Rpb24vcHJvZHVjdDpTTXI0cmhERm5ZdkZNdERUWA==",
@@ -207,7 +204,6 @@ export default {
       }
     },
     {
-      toGrid: 1,
       priority: 0,
       productId: "cmVhY3Rpb24vcHJvZHVjdDpCQ1RNWjZIVHhGU3BwSkVTaw==",
       variantId: "cmVhY3Rpb24vcHJvZHVjdDpDSm9SQm05dlJyb3JjOW14Wg==",
@@ -220,7 +216,6 @@ export default {
       }
     },
     {
-      toGrid: 1,
       priority: 2,
       productId: "cmVhY3Rpb24vcHJvZHVjdDpCQ1RNWjZIVHhGU3BwSkVTaw==",
       variantId: "cmVhY3Rpb24vcHJvZHVjdDo2cWlxUHdCa2VKZHRkUWM0Rw==",
@@ -233,7 +228,6 @@ export default {
       }
     },
     {
-      toGrid: 1,
       priority: 3,
       productId: "cmVhY3Rpb24vcHJvZHVjdDpCQ1RNWjZIVHhGU3BwSkVTaw==",
       variantId: "cmVhY3Rpb24vcHJvZHVjdDo2cWlxUHdCa2VKZHRkUWM0Rw==",
@@ -246,7 +240,6 @@ export default {
       }
     },
     {
-      toGrid: 1,
       priority: 4,
       productId: "cmVhY3Rpb24vcHJvZHVjdDpCQ1RNWjZIVHhGU3BwSkVTaw==",
       variantId: "cmVhY3Rpb24vcHJvZHVjdDo2cWlxUHdCa2VKZHRkUWM0Rw==",
@@ -259,7 +252,6 @@ export default {
       }
     },
     {
-      toGrid: 1,
       priority: 5,
       productId: "cmVhY3Rpb24vcHJvZHVjdDpCQ1RNWjZIVHhGU3BwSkVTaw==",
       variantId: "cmVhY3Rpb24vcHJvZHVjdDo2cWlxUHdCa2VKZHRkUWM0Rw==",