Step 1: Are you in the right place?

• For issues or feature requests related to the code in this repository file a Github issue.
• For issues relating to EP-Commerce, or Cloud Ops in relation to the reference store please Open a Support ticket.

message container does not render anything in storybook

Step 2: Describe your environment

Issues submitted without sufficient information will be rejected.

• Device: _____
• OS version: _____
• Storefront pulled version: _____
• Node version: _____
• Docker version: _____
• Docker Compose version: _____

Step 3: Describe the problem:

Steps to reproduce:

Observed Results:

• What happened? This could be a description, console log output, etc.

Expected Results:

• What did you expect to happen?

Relevant Code:

// TODO(you): code here to reproduce the problem

Step 1: Are you in the right place?

I think so.

Step 2: Describe your environment

Observed on Reference Store hosted on AWS S3, compiled with Node version mentioned below.

• Device: Macbook Pro (15-inc, 2018)
• OS version: OSX Version 10.14.6 (18G103)
• Storefront pulled version: v3.0.12 (commit fc249c8)
• Node version: v11.15.0
• Docker version: (irrelevant. Reference Store is statically-hosted)
• Docker Compose version: (irrelevant. Reference Store is statically-hosted)

Step 3: Describe the problem:

When logged in as a B2B user, the Bulk Order and Quick Order forms do not notify the user when they succeed. I believe is disconcerting for two reasons:

1. When adding to a cart from the Product Detail Page (as a B2B user) a notification pops up pointing at the mini cart. Not having this in the bulk order/quick order forms kind of leaves the user hanging, and also feels inconsistent (see screenshot).
   

2. When a user enters erroneous data on either form, an error message pops up at the top of the screen. Users get feedback when they do something invalid, but not when they enter correct information.

In the Steps to Reproduce, I have covered demonstrating the behaviour for the Quick Order form. However, the same issue is present from the Bulk Order form, as well.

Steps to reproduce:

1. Log in as a B2B user with Buyer privileges
2. Click the lightning bolt icon
3. Ensure you are on the "Quick Order" page
4. Enter a valid SKU, but set the quantity to 1
5. Click "Add All to Cart"
6. Notice that an error is displayed
   
7. Update the quantity to some positive number
8. Click "Add All to Cart"

Observed Results:

• The loading spinner runs
• All fields are reset
• The "Add All to Cart" is reset to disabled
• No clear indicator of what happened (I am left thinking "did my items get put in the cart, or did the page just break and lose all my work?")

Expected Results:

• Some sort of positive user feedback to be displayed (likely the same notification message used on the Product Detail pages). In particular, given that the Reference Store now supports multiple carts, it would likely be a good idea to give the user some feedback as to which cart their items were placed into.

Step 1: Are you in the right place?

• For issues or feature requests related to the code in this repository file a Github issue.
• For issues relating to EP-Commerce, or Cloud Ops in relation to the reference store please Open a Support ticket.

Step 2: Describe your environment

Issues submitted without sufficient information will be rejected.

• Device: _____
• OS version: _____
• Storefront pulled version: _____
• Node version: _____
• Docker version: _____
• Docker Compose version: _____

Step 3: Describe the problem:

The AppHeaderNavigationMain component in storybook is broken.

Steps to reproduce:

Turn on storybook and notice that nothing shows for the appheadernavigation story.

Observed Results:

• What happened? This could be a description, console log output, etc.

Expected Results:

• What did you expect to happen?

Relevant Code:

// TODO(you): code here to reproduce the problem

Step 2: Describe your environment

Customer 0 Production Env: https://www.epccstore0.com
Chrome Browser on Mac OS

Step 3: Describe the problem:

The follow JS file (which are the first files downloaded and block render) are not compressed when sent to client browser:

• runtime.js
• vendors-app.js
• app.js

Steps to reproduce:

1. Open Chrome
2. Open Dev Tools - Select Disable Cache to ensure resources are fetched
3. Navigate to https://www.epccstore0.com/

Observed Results:

• The above files are downloaded uncompressed

Expected Results:

• The above files should be compressed

Step 1: Are you in the right place?

• For issues or feature requests related to the code in this repository file a Github issue.
• For issues relating to EP-Commerce, or Cloud Ops in relation to the reference store please Open a Support ticket.

Step 2: Describe your environment

Issues submitted without sufficient information will be rejected.

• Device: MacOS
• OS version: 10.14.5
• Storefront pulled version: 52f979f
• Node version: v11.13.0
• Docker version: _____
• Docker Compose version: _____

Step 3: Describe the problem:

Storybook does not compile and build.

Steps to reproduce:

1. Start the storybook project with cd storybook && yarn storybook
2. Notice the build errors (attached)

Observed Results:

Expected Results:

• Expected application to build

Relevant Code:

indirecommendations.main.tsx

Hey this is a test issue.

Step 1: Are you in the right place?

• For issues or feature requests related to the code in this repository file a Github issue.
• For issues relating to EP-Commerce, or Cloud Ops in relation to the reference store please Open a Support ticket.

Step 2: Describe your environment

• Storefront pulled version: latest

Step 3: Describe the problem:

Enhancement suggestion:

• Currently icons need to be overwritten for each file
• This task is to add variables or filters to the icons so they can be set in common.less
• May need to consider how this is consumed per component

Step 1: Are you in the right place?

Yes (this is a Reference Store UI issue).

Step 2: Describe your environment

This was observed on a copy of Reference Store that was hosted on AWS S3, compiled with the Node version mentioned below

• Device: Macbook Pro (15-inc, 2018)
• OS version: OSX Version 10.14.6 (18G103)
• Storefront pulled version: v3.0.12 (commit fc249c8)
• Node version: v11.15.0
• (Docker versions omitted as Docker is not involved in this deployment).

Step 3: Describe the problem:

On the Registration page, pressing the enter key while focused on the input text boxes does not submit the form. Instead, users need to first tab to the submit button. I think this breaks standard keyboard navigation conventions.

In vanilla HTML/JS forms, pressing enter while focused anywhere within a <form></form> tag pair that contains a <button type="submit"> button will trigger a form submit.

Note: This is not an issue in every form in the Reference Store - most of them behave exactly as expected. I think most likely the registration form just got missed.

Steps to reproduce:

1. Ensure you are not logged in
2. Click "Login"
3. Click "Register"
4. Fill out the form fields
5. While focused on one of the text inputs (not the submit button), press enter

Observed Results:

• Pressing the enter key while focused on any form element except the "Submit" button does nothing.

Expected Results:

• While focused within a form, pressing the enter key from anywhere within that form should trigger the submit functionality.

Step 1: Are you in the right place?

• For issues or feature requests related to the code in this repository file a Github issue.
• For issues relating to EP-Commerce, or Cloud Ops in relation to the reference store please Open a Support ticket.

powerreview not showing up in storybook

Step 2: Describe your environment

Issues submitted without sufficient information will be rejected.

• Device: _____
• OS version: _____
• Storefront pulled version: _____
• Node version: _____
• Docker version: _____
• Docker Compose version: _____

Step 3: Describe the problem:

Steps to reproduce:

Observed Results:

• What happened? This could be a description, console log output, etc.

Expected Results:

• What did you expect to happen?

Relevant Code:

// TODO(you): code here to reproduce the problem

Step 2: Describe your environment

https://reference.elasticpath.com/
Any browser that has had it's cache cleared

Step 3: Describe the problem:

Make numerous calls to fetch each font in different file formats. While this may be required to ensure we have broad browser support some file formats like TTF, WOFF, and WOFF2 all support the same browser. Can we simplify by only fetch the minimum and most optimized set we need to support all version of IE, Safari, Firefox, Chrome, Opera, etc? By my understanding that would be WOFF and EOT.

Steps to reproduce:

1. Clear your browser cache
2. Close and re-open browser
3. Open dev tools
4. Navigate to https://reference.elasticpath.com/
5. See that every font is downloaded 3 or 4 times.

Observed Results:

Font downloaded in all available formats.

Expected Results:

Fonts should be download in minimum and most optimized formats to support maximum browsers.

Issues submitted without sufficient information will be rejected.

• Device: ANY___
• OS version: ANY_
• Storefront pulled version: See https://github.com/ep-pd/autobahn-react-pwa-reference-storefront/commit/966cbd27abe4df928cd277ce68f2355862e8bda9
• Node version: N/A_
• Docker version: N/A_
• Docker Compose version: N/A_

Step 3: Describe the problem:

We have an AWS API Gateway in front of cortex. The API Gateway is not passing the 'followlocation' parameter to cortex on requests where no value is set for 'followlocation'. That is, when a request to the API gateway includes a query string like ?zoom=blah&followlocation, the API Gateway will strip off followlocation, and the query string that makes it to cortex is just ?zoom=blah.

Steps to reproduce:

1. Deploy an AWS API Gateway. EP CloudOps v3.2 does this for you. You also need to apply some changes to the config so that a) it uses method 'http' instead of 'http_proxy' and b) it maps the 'Accept' and 'Content-Type' headers on the request.
2. Build the reference store so that cortex calls are made to the AWS API Gateway (not to an nginx proxy)
3. Browse to the store and click a category

Observed Results:

The category page never opens and the spinner spins for ever. In the 'network' tab of the developer tools you see that the response body is empty, for the cortex request like(/cortex/navigations/mobee/lookups/form?zoom=items,items:element,items:element:code,items:element:availability,items:element:definition,items:element:definition:assets:element,items:element:price,items:element:rate,element,element:availability,element:definition,element:definition:assets:element,element:price,element:rate,element:code&followlocation)

Expected Results:

The page will load because the cortex response body contains a valid json response.

Suggested Change:

To work around this AWS API Gateway behaviour, the store code could explicitly set followlocation=true in all cortex calls that include followlocation. Per Matt B on the EP PD team: "followlocation=true is the same as just followlocation".

Step 2: Describe your environment

https://reference.elasticpath.com/
Any browser that has had it's cache cleared

Step 3: Describe the problem:

There appear to be numerous splash screens and icons downloaded if browser cache has been cleared. The splash screen aren't visible (at least I can't see them and do we really need 4 icon sizes). Also can we sprite some of these images to reduce round trips? Would GIF's be better as they appear to be 2 tone images?

Icons:

• https://reference.elasticpath.com/assets/icons/icon_96x96.96e89d73d9f180d508b65937e5eaacee.png
• https://reference.elasticpath.com/assets/icons/icon_256x256.b8737e0360bf51d25e45dc8d891dc033.png
• https://reference.elasticpath.com/assets/icons/icon_512x512.f8980e211966686890d5acf38d4f0ed1.png
• https://reference.elasticpath.com/images/e090eb08fe409c1a4bfb3fa688af4b43-icons-192.png
• https://reference.elasticpath.com/assets/icons/icon_128x128.0e13534aedef69f0aa5f98550452acc7.png
• https://reference.elasticpath.com/images/a924595f85a0f27ce58c0533e435125e-icons-512.png

Splash screens

• https://reference.elasticpath.com/images/970cfa85588d72a3b1f123b7131ac119-iphonex_splash.png
• https://reference.elasticpath.com/images/60678b1285ab940fb105795cb6306c57-iphonexr_splash.png
• https://reference.elasticpath.com/images/59f6626d918035338595b0947e50d5a4-iphone6_splash.png
• https://reference.elasticpath.com/images/ecf8a674c2618710db6c1ca8543e1e59-ipadpro2_splash.png
• https://reference.elasticpath.com/images/63d50a18d6e38bf5ff7517a5d9bf8422-iphoneplus_splash.png
• https://reference.elasticpath.com/images/a91b3dedeb030b27aa0ce9f38cf4334b-ipadpro1_splash.png
• https://reference.elasticpath.com/images/6e51084591ff128985cd0141b4a85514-iphone5_splash.png
• https://reference.elasticpath.com/images/02bd38d45eaeffb28f7ace1174f527b3-iphonexsmax_splash.png
• https://reference.elasticpath.com/images/d19b430145e3a416b06d8901a7b49925-ipad_splash.png

Steps to reproduce:

1. Clear your browser cache
2. Close and re-open browser
3. Open dev tools
4. Navigate to https://reference.elasticpath.com/
5. See all the calls for icons and splash screens

Observed Results:

Lot's of calls to big files. Splash screens not visible on the site

Expected Results:

Are these necessary? Can they be optimized?

Step 1: Are you in the right place?

Pretty sure.

Step 2: Describe your environment

• Device: Thinkpad T460s
• OS version: Windows 10 1703
• Storefront pulled version:
  • App version: 3.0.12
  • Components version: 1.1.39
  • Latest commit hash: add009a
• Node version: 10.14.2
• Docker version: n/a
• Docker Compose version: n/a

Step 3: Describe the problem:

There are a couple of issues with the current implementation of the MessageContext.

The MessageContext stores a list of errors. If a new structured error message or needinfo is returned from Cortex, it is added to the list of errors being displayed. This causes problems when you are trying to resolve multiple needinfos that are being displayed, like when you are going through a guest checkout. The previous needinfos remain on the page, and a shorter list is appended below. Similarly, when a user resolves needinfos, they are not cleared. It looks like the only way to trigger the removal of a message is to click the X. I have attached an screenshot of a user who is able to complete their order, but has retained all the error messages and need infos they encountered on the page during the process.
.

Another result of having the MessageContainer exist outside of the containers that are making the calls to Cortex is that when the messages are not cleared if the user navigates to a separate container, and the messages remain at the top of the page.

Steps to reproduce:

1. Navigate to a category page as a guest user
2. Add any item to cart
3. Go to Cart Page
4. Click Proceed to checkout
5. Enter a guest email and click Continue to Checkout
6. Note the 4 need infos at the top of the page.
7. Add a billing address
8. Instead of only having one needinfo like a call to the order resource returns, there are now five
9. Add a payment method
10. Click Complete Order, or the logo to take you to the homepage
11. The needinfos remain at the top of the page

Observed Results:

Steps 8 and 11

Expected Results:

The messages at the top of the page to reflect what is being returned from Cortex currently.

Step 1: Are you in the right place?

Reference store issue.

Step 2: Describe your environment

• Device: Thinkpad P52
• OS version: Ubuntu 19.04
• Storefront pulled version: d6f73e2
• Node version: v12.8.0
• Docker version: 18.09.7
• Docker Compose version: 1.22.0

Step 3: Describe the problem:

When updating @mainNavigationTextColor the locale text and the login text buttons do not change text color. Currently text color for these buttons are mapped to @mainBackgroundColor.

Steps to reproduce:

1. Run the site locally using yarn start
2. In components/src/style/common.less change the @mainNavigationTextColor
3. View the result in localhost:8080

Observed Results:

Text color changes for header navigation text, and shipping, help, contact text; however does not change for locale and login text.

Expected Results:

Text color changes for all the text in the header to be consistent. (Would be ideal for the icons to also change color for consistency, but those are .svg and .png files.)

Relevant Code:

In appheaderlocale.main.less

...
  .dropdown-toggle {
    font-size: 13px;
    border: 0;
    background-color: transparent;
    color: @mainBackgroundColor;
    cursor: pointer;

    &:focus {
      box-shadow: none;
    }
  }
...

In appheaderlogin.main.less

...
  .login-btn {
    background-color: transparent;
    border: 0;
    color: @mainBackgroundColor;
    cursor: pointer;
  }
...

Testing all aspects of support integration.

Step 1: Are you in the right place?

• For issues or feature requests related to the code in this repository file a Github issue.
• For issues relating to EP-Commerce, or Cloud Ops in relation to the reference store please Open a Support ticket.

Step 2: Describe your environment

Issues submitted without sufficient information will be rejected.

• Device: _____
• OS version: _____
• Storefront pulled version: _____
• Node version: _____
• Docker version: _____
• Docker Compose version: _____

Step 3: Describe the problem:

Steps to reproduce:

Observed Results:

• What happened? This could be a description, console log output, etc.

Expected Results:

• What did you expect to happen?

Relevant Code:

// TODO(you): code here to reproduce the problem

Step 1: Are you in the right place?

• For issues or feature requests related to the code in this repository file a Github issue.
• For issues relating to EP-Commerce, or Cloud Ops in relation to the reference store please Open a Support ticket.

Step 2: Describe your environment

• Device: MacOSX
• OS version: 10.14.5
• Storefront pulled version: 78d7dec
• Node version: _____
• Docker version: _____
• Docker Compose version: _____

Step 3: Describe the problem:

Steps to reproduce:

1. Add a bundled item. In our the demo-teams vestri-v2 catalog we can use the Clothing Bundle
2. navigate to the cart page
3. click the configure button to configure the bundle and add to bag any number of available options

Observed Results:

Notice at the bottom of the module that the spinner will go on infinitely and once the the modal is closed the cart is not updated unless the page is refreshed.

Expected Results:

Would expect the spinner to not spin forever and the cart to update right away as soon as the modal is closed.

Relevant Code:

// TODO(you): code here to reproduce the problem

Step 2: Describe your environment

https://reference.elasticpath.com/
Webpage Test: https://www.webpagetest.org or any browser if you clear full browsing history and cached files.

Step 3: Describe the problem:

We download the following files twice. Once from s3 and once from https://reference.elasticpath.com/

• Company-Logo-v1.png
• homepage-banner.jpg
• brake-icon.jpg
• charging-icon.jpg
• warranty-graphic.jpg

Steps to reproduce:

Navigate to https://reference.elasticpath.com/ with dev tools open

Observed Results:

You see the above files being downloaded from s3 and then from https://reference.elasticpath.com/.

Expected Results:

They should only be downloaded once from 1 location

Step 2: Describe your environment

https://reference.elasticpath.com/ and http://epstorefront.net/
Any browser

Step 3: Describe the problem:

Images are currently being served from a combination of the site URL and S3. For best performance we should be serving these images from a CDN such as Cloudfront.

Steps to reproduce:

1. Clear browser cache and open dev tools
2. Navigate to Storefront homepage URL
3. Notice that images are served from a combination of s3 and web server with long initial connection and SSL negotiation times for S3.

Observed Results:

Images are served from a combination of s3 and web server with long initial connection and SSL negotiation times for S3.

Expected Results:

Images should be server from CDN such as Cloudfront with shorter initial connection and SSL negotiation times

Step 1: Are you in the right place?

• For issues or feature requests related to the code in this repository file a Github issue.

Step 2: Describe your environment

• Device: N/A___
• OS version: N/A___
• Storefront pulled version: N/A_
• Node version: N/A___
• Docker version: _N/A
• Docker Compose version: N/A___

Step 3: Describe the problem:

Deployed the prod docker container. When attempting to hit the site I'm getting the default ngnix index.html

Steps to reproduce:

1. Build and deploy container_
2. Connect to URL on port 80, you get the default page_

3. ---

Observed Results:

wrong web site

Expected Results:

should've got the reference store

Relevant Code:

listen 80;
server_name localhost;

#charset koi8-r;
#access_log  /var/log/nginx/host.access.log  main;

location / {
    root   /usr/share/nginx/html;
    index  index.html index.htm;
}

I ended up connecting to the container and moving /usr/share/nginx/www to html and site is now up

Step 1: Are you in the right place?

Feature Request

Step 2: Describe your environment

Local Development

• Device: MacOS Mojave
• OS version: 10.14.5
• Storefront pulled version: fcc04b7

Step 3: Describe the problem:

There are duplicate style files and images for the two projects, the webapp and storybook project. One set under the path app/src and another under components/src/style. It seems as though only the image and style files under the path components/src/style are being used. For example changing the @mainColor css variable under components/src/style changes the color of the header bar in both the reference store web application as well as the component in storybook. Furthermore, changing any of the images under components/src/images changes the images in both projects as well. Having two sets of assets can make reskinning and repurposing the reference store troublesome.

Steps to reproduce:

1. Change @mainColor css variable under components/src/style
2. Start the reference store web app as well as the components

Observed Results:

Notice that the theme of the two applications has changed when really it should just be the component theme?

(Can try and change the images under components/src/images and notice that it changes the reference store images well).

(Can also try and change the images and variables under app/src and notice nothing changes in the reference store).

Expected Results:

Expect the changes for styles and images in each of the respective projects to be used in their respecitve projects.

Step 1: Are you in the right place?

• For issues or feature requests related to the code in this repository file a Github issue.
• For issues relating to EP-Commerce, or Cloud Ops in relation to the reference store please Open a Support ticket.

indirecommendations does not render anything in storybook

Step 2: Describe your environment

Issues submitted without sufficient information will be rejected.

• Device: _____
• OS version: _____
• Storefront pulled version: _____
• Node version: _____
• Docker version: _____
• Docker Compose version: _____

Step 3: Describe the problem:

Steps to reproduce:

Observed Results:

• What happened? This could be a description, console log output, etc.

Expected Results:

• What did you expect to happen?

Relevant Code:

// TODO(you): code here to reproduce the problem

Step 1: Are you in the right place?

• For issues or feature requests related to the code in this repository file a Github issue.
• For issues relating to EP-Commerce, or Cloud Ops in relation to the reference store please Open a Support ticket.

Step 2: Describe your environment

Issues submitted without sufficient information will be rejected.

This was deployed onto an S3 bucket by yarn build and uploading the contents to the bucket. The information listed based on the machine that was used to deploy it.

• Device: Amazon Ec2
• OS version: Linux
• Storefront pulled version: v3.0.12
• Node version: v10.16.0
• Docker version: 18.09.9-ce
• Docker Compose version: 1.21.0

Step 3: Describe the problem:

Previously, PWA does not render the cart page if someone with only the Catalog Browser role attempts to access it. The cart icon would also be hidden at the top right corner of the page along with the bulk order icon.

Steps to reproduce:

1. Confirm the reference store is B2B with the bulk order lightning bolt icon being in the top right corner.
2. Login as a user that is a Catalog Browser in a Department
3. Select the Department that the user is a Catalog Browser on
4. Observe the tool bar icons

Observed Results:

• What happened? This could be a description, console log output, etc.
  The lightning bolt icon disappears, and the cart icon remains. Clicking the cart icon results in the user being at the cart page, but without any authorization to view cart, the cart page forever has a spinner.

Expected Results:

• What did you expect to happen?

Both the bulk order and cart icon should be hidden to the catalog browser.

Step 1: Are you in the right place?

• For issues or feature requests related to the code in this repository file a Github issue.
• For issues relating to EP-Commerce, or Cloud Ops in relation to the reference store please Open a Support ticket.

Step 2: Describe your environment

• Device: Windows Laptop
• OS version: Windows 10 Pro v1903
• Storefront pulled version: (Demo Team)
• Node version: (Demo Team)
• Docker version: (Demo Team)
• Docker Compose version: (Demo Team)

Step 3: Describe the problem:

The button to remove voucher codes on the order and order confirmation page do seem to remove the voucher, but not update the screen. So if someone where to press that button, they so no changes, however their voucher code is removed, the total price potentially goes up because of this. When pressing complete order, this customer could be paying more than shown on their screen.

Steps to reproduce:

1. Add a voucher to a cart
2. Proceed to the order screen
3. Remove voucher
4. Return to cart
5. Proceed to order confirmation screen
6. Remove voucher

Observed Results:

3. No refresh or price updates are done
4. The voucher has at this stage been removed
5. No refresh or price updates are done

Expected Results:

I expect the screen to update the voucher status, price and discounts at step 4 and 6.

Relevant Code:

// TODO(you): code here to reproduce the problem

Step 1: Are you in the right place?

• For issues or feature requests related to the code in this repository file a Github issue.

Step 2: Describe your environment

• Device: N/A___
• OS version: _N/A
• Storefront pulled version: _N/A
• Node version: v8.12.0____

Step 3: Describe the problem:

When attempting to build the docker image it's failing.

[dmulroo@danielm-m3 react-pwa-reference-storefront]$ pwd
/home/dmulroo/workspace/elastic/frontend/react-pwa-reference-storefront
[dmulroo@danielm-m3 react-pwa-reference-storefront]$ sudo docker build -t ep_build ./docker/prod/
Sending build context to Docker daemon 4.608 kB
Step 1/9 : FROM node:10.9.0 as builder
Error parsing reference: "node:10.9.0 as builder" is not a valid repository/tag: invalid reference format

Steps to reproduce:

[dmulroo@danielm-m3 react-pwa-reference-storefront]$ pwd
/home/dmulroo/workspace/elastic/frontend/react-pwa-reference-storefront
[dmulroo@danielm-m3 react-pwa-reference-storefront]$ sudo docker build -t ep_build ./docker/prod/
Sending build context to Docker daemon 4.608 kB
Step 1/9 : FROM node:10.9.0 as builder
Error parsing reference: "node:10.9.0 as builder" is not a valid repository/tag: invalid reference format

Observed Results:

• What happened? This could be a description, console log output, etc.

Expected Results:

• What did you expect to happen?

Relevant Code:

// TODO(you): code here to reproduce the problem

Step 1: Are you in the right place?

Yes (this is a Reference Store code issue).

Step 2: Describe your environment

Observed on Reference Store hosted on AWS S3, compiled with Node version mentioned below.

• Device: Macbook Pro (15-inc, 2018)
• OS version: OSX Version 10.14.6 (18G103)
• Storefront pulled version: v3.0.12 (commit fc249c8)
• Node version: v11.15.0
• Docker version: (Not relevant. Reference Store is statically-hosted)
• Docker Compose version: (Not relevant. Reference Store is statically-hosted)

Step 3: Describe the problem:

Steps to reproduce:

1. On a PC or laptop, navigate to a B2B-enabled Reference Store
2. Log in as a Buyer user
3. Click the lightning bolt to open the Quick Order form
4. Focus on the first SKU field
5. Use Tab to navigate to the quantity field, then to the next SKU. Use Shift + Tab to navigate back.

Observed Results:

• In order to get to the actual quantity field, the user has to press tab twice.
• In order to get to the next SKU field, the user has to press tab a total of 3 times.

Expected Results:

• Tab navigation should skip the + and - icons.
• Optionally, the user should be able to use, perhaps, the up and down arrows to increment/decrement the quantity?

Environment:
Production: https://reference.elasticpath.com/ + Test browsers provided by Webpage Test and Google Page Speed.

Problem:
According to Webpage Test and Google Page Speed compression is not enabled on https://reference.elasticpath.com/

Steps to Reproduce:

1. Navigate to https://www.webpagetest.org or https://developers.google.com/speed/pagespeed/insights/
2. Type in our production URL: https://reference.elasticpath.com/

Observed Results:
Webpage Test
Use gzip compression for transferring compressable responses: 23/100
1,051.1 KB total in compressible text, target size = 240.9 KB - potential savings = 810.2 KB

FAILED - (551.7 KB, compressed = 147.8 KB - savings of 403.8 KB) - https://reference.elasticpath.com/vendors~app.js
FAILED - (409.6 KB, compressed = 62.4 KB - savings of 347.2 KB) - https://reference.elasticpath.com/app.js
FAILED - (28.3 KB, compressed = 2.0 KB - savings of 26.3 KB) - https://reference.elasticpath.com/cortex/?zoom=navigations:element,navigations:element:child
FAILED - (28.3 KB, compressed = 2.0 KB - savings of 26.3 KB) - https://reference.elasticpath.com/cortex/?zoom=navigations:element,navigations:element:child
FAILED - (6.0 KB, compressed = 2.2 KB - savings of 3.9 KB) - https://reference.elasticpath.com/
FAILED - (1.8 KB, compressed = 0.4 KB - savings of 1.4 KB) - https://reference.elasticpath.com/cortex/?zoom=lookups:navigationlookupform
FAILED - (1.8 KB, compressed = 0.4 KB - savings of 1.4 KB) - https://reference.elasticpath.com/cortex/?zoom=lookups:purchaselookupform

Google Page Speed:
Google Page Speed:
Text-based resources should be served with compression (gzip, deflate or brotli) to minimize total network bytes. Learn more.
URL
Size (KB)
Potential Savings (KB)
/vendors~app.js(reference.elasticpath.com)
552 KB
404 KB
/app.js(reference.elasticpath.com)
410 KB
347 KB
/cortex/?zoom=navigations:element,navigations:element:child(reference.elasticpath.com)
28 KB
26 KB
https://reference.elasticpath.com
6 KB
4 KB
/cortex/?zoom=lookups:navigationlookupform(reference.elasticpath.com)
2 KB
1 KB
/cortex/?zoom=lookups:purchaselookupform(reference.elasticpath.com)
2 KB
1 KB

Expected Results:
None of the above failed tests

Step 1: Are you in the right place?

Step 2: Describe your environment

• Device: MACOSX
• OS version: 10.14.5
• Storefront pulled version: 1dd8394
• Node version: v11.13.0
• Docker version: _____
• Docker Compose version: _____

Step 3: Describe the problem:

The linter is not working for both the web application and storybook. Can try a simple test by uncommenting an eslint disable .. line and see that the webpack live bundler does not pick up any linter violations. Can also write a console.log in any files (a common airbnb standard violation) and no linter errors appear. Upon inspecting the webpack config files you can see that the linter sections are commented out. Uncommenting these lines does indeed turn the linter back on, atleast for the CRA dev server.

Further, there is no .eslintrc file in the project and so the vscode eslint plugin does not pick up eslint errors right in the ide.

Steps to reproduce:

1. Write eslint violations

Observed Results:

• no violations

Expected Results:

• no violations were not caught in both the ide and the dev servers.

Relevant Code:

// TODO(you): code here to reproduce the problem

• Device: Lap Top___
• OS version: Windows 10___
• Storefront pulled version: B2B QA Reference Store___
• Node version: B2B QA Reference Store___
• Docker version: B2B QA Reference Store___
• Docker Compose version: B2B QA Reference Store___

Step 3: Describe the problem:

In our B2B version we assume the person logging in is a buyer or someone with authorization contexts available. When you log in as a seller admin the "Shop For" dialog doesn't look/work well.

Steps to reproduce:

1. Log into the B2B version as "[email protected]_
2. Pop up shows as attached_

Observed Results:

The list empty, and the "Continue With" button looks/is clickable but doesn't go anywhere.

Expected Results:

The popup does something better

Step 1: Are you in the right place?

• For issues or feature requests related to the code in this repository file a Github issue.
• For issues relating to EP-Commerce, or Cloud Ops in relation to the reference store please Open a Support ticket.
  orderhistorylinemain loading forever in storybook

Step 2: Describe your environment

Issues submitted without sufficient information will be rejected.

• Device: _____
• OS version: _____
• Storefront pulled version: _____
• Node version: _____
• Docker version: _____
• Docker Compose version: _____

Step 3: Describe the problem:

Steps to reproduce:

Observed Results:

• What happened? This could be a description, console log output, etc.

Expected Results:

• What did you expect to happen?

Relevant Code:

// TODO(you): code here to reproduce the problem

Step 1: Are you in the right place?

• For issues or feature requests related to the code in this repository file a Github issue.
• For issues relating to EP-Commerce, or Cloud Ops in relation to the reference store please Open a Support ticket.

facebook chat component does not render anything in storybook

Step 2: Describe your environment

Issues submitted without sufficient information will be rejected.

• Device: _____
• OS version: _____
• Storefront pulled version: _____
• Node version: _____
• Docker version: _____
• Docker Compose version: _____

Step 3: Describe the problem:

Steps to reproduce:

Observed Results:

• What happened? This could be a description, console log output, etc.

Expected Results:

• What did you expect to happen?

Relevant Code:

// TODO(you): code here to reproduce the problem

Step 1: Are you in the right place?

• For issues or feature requests related to the code in this repository file a Github issue.
• For issues relating to EP-Commerce, or Cloud Ops in relation to the reference store please Open a Support ticket.

The categoryItemsMain component is not showing up in storybook. Left with constant spinner

Step 2: Describe your environment

Issues submitted without sufficient information will be rejected.

• Device: _____
• OS version: _____
• Storefront pulled version: _____
• Node version: _____
• Docker version: _____
• Docker Compose version: _____

Step 3: Describe the problem:

Steps to reproduce:

Observed Results:

• What happened? This could be a description, console log output, etc.

Expected Results:

• What did you expect to happen?

Relevant Code:

// TODO(you): code here to reproduce the problem

Step 1: Are you in the right place?

Yes

Step 2: Describe your environment

N/A

Issues submitted without sufficient information will be rejected.

• Device: _____
• OS version: _____
• Storefront pulled version: _____
• Node version: _____
• Docker version: _____
• Docker Compose version: _____

Step 3: Describe the problem:

The current quick order form prevents multi-SKU products from being added to cart.

Steps to reproduce:

1. Open the Quick Order Form
2. Enter the SKU from a Multi-SKU product
3. Try to enter a quantity of 1

Observed Results:

A message will appear saying "{SKUCode} is a configurable product. Please visit the product page to add it to the cart."

Expected Results:

Multi-SKU products should be able to be entered using their SKU. Originally I was thinking that the check should be to see if there are any Cart Item Modifiers on the addtocartform, but I am no longer convinced this should be the case. Cart Item Modifiers can be optional, so I do not believe that we should prevent users from attempting to submit this form through the front-end just because there are Cart Item Modifiers available.

Relevant Code:

The check in question is in the quickorderform.tsx file:

          if (res._definition[0]._options) {
            this.setState({
              product: res,
              isLoading: false,
              skuErrorMessage: intl.get('configurable-product-message', { SKUCode: productId }),
            });
            onItemSubmit({
              code, quantity, product: {}, isValidField: false,
            });
          }

Step 1: Are you in the right place?

• For issues or feature requests related to the code in this repository file a Github issue.
• For issues relating to EP-Commerce, or Cloud Ops in relation to the reference store please Open a Support ticket.

Step 2: Describe your environment

Issues submitted without sufficient information will be rejected.

• Device: Lenovo Thinkpad
• OS version: Microsoft Windows 10 Pro v10.0.15063
• Storefront pulled version: commit 820570c
• Node version: 10.14.2
• Docker version: n/a
• Docker Compose version: n/a

Step 3: Describe the problem:

Faceted search fails to return results unless the scope in ep.config.json is entirely lowercase. I will submit a PR to address this.

Steps to reproduce:

1. In ep.config.json, change the scope from vestri to VESTRI
2. Run npm start
3. Search for tires
4. Select any facet value

Observed Results:

No products are found. There is a case sensitive string comparison in CortexLookup.js looking for scope in a URI. In Cortex, scope is not a case sensitive value, and the URIs that contain the scope will always be lower case.

Expected Results:

Faceted search to work with any valid scope.

Relevant Code:

n/a

Step 1: Are you in the right place?

Reference store issue.

Step 2: Describe your environment

• Device: MacOS Mojave
• OS version: 10.14.6
• Storefront pulled version: 60fd353
• Node version: v12.8.0
• Docker version: 18.09.2
• Docker Compose version: 1.23.2

Step 3: Describe the problem:

CSS ordering is inconsistent between local development using yarn start and production using yarn build. Bootstrap is loaded second last for local development and is loaded first for production, which results in several incorrect looking elements when deployed.

Steps to reproduce:

1. Run the site locally using yarn start
2. Build the site for production using yarn build
3. Run the production site using serve -s build

Observed Results:

Inconsistency between the 2 local sites at port 8080 (development) and port 5000 (production), elements such as the locale flag, or the "Fully automated braking system" are positioned incorrectly on the production site.

Expected Results:

Running the site in development and production should have the same styling.

Relevant Code:

The order of the bootstrap CSS is different in the <head> element between development and production. In development, bootstrap is loaded as a <style> element and is second last. In production, bootstrap is loaded through a stylesheet and is the first one loaded.

Step 2: Describe your environment

https://reference.elasticpath.com/
Any browser that has had it's cache cleared

Step 3: Describe the problem:

There are two calls to fetch https://reference.elasticpath.com/manifest.appcache if the browser cache is cleared first.

Steps to reproduce:

1. Clear your browser cache
2. Close and re-open browser
3. Open dev tools
4. Navigate to https://reference.elasticpath.com/
5. See the duplicate calls to fetch https://reference.elasticpath.com/manifest.appcache

Observed Results:

2 calls to fetch https://reference.elasticpath.com/manifest.appcache

Expected Results:

1 call to fetch https://reference.elasticpath.com/manifest.appcache

Step 1: Are you in the right place?

• For issues or feature requests related to the code in this repository file a Github issue.
• For issues relating to EP-Commerce, or Cloud Ops in relation to the reference store please Open a Support ticket.

In Storybook the chat component does not render anything.

Step 2: Describe your environment

Issues submitted without sufficient information will be rejected.

• Device: _____
• OS version: _____
• Storefront pulled version: _____
• Node version: _____
• Docker version: _____
• Docker Compose version: _____

Step 3: Describe the problem:

Steps to reproduce:

Observed Results:

• What happened? This could be a description, console log output, etc.

Expected Results:

• What did you expect to happen?

Relevant Code:

// TODO(you): code here to reproduce the problem

Step 2: Describe your environment

https://reference.elasticpath.com/ and http://epstorefront.net/
Browser: Any

Step 3: Describe the problem:

Steps to reproduce:

1. Navigate to https://reference.elasticpath.com/
2. Right click an image
3. Save it
4. Navigate to a site like https://tinypng.com or https://cloudinary.com
5. Run image through lossy compression and notice that we can reduce image size another 70+%
6. Compare with original image and notice that there is no decernable loss in quality

Observed Results:

Image files are much larger than they need to be. This will make our page $$$ on mobile and slow on 3G. We can probably cut close to 1 MB per page load if we maximum compression of these images (without losing quality).

Expected Results:

Images should be smaller

Step 2: Describe your environment

• Device: laptop & iPhone (PWA)
• OS version: Window & iOS
• Storefront pulled version: _____
• Node version: _____
• Docker version: _____
• Docker Compose version: _____

Step 3: Describe the problem:

When the first/new shipping method is added for a region, it seems that the checkout page goes blank. Selecting the new shipping method once via Studio will subsequently work in the reference store.

I think the underlying issue is that in those cases there is an option, but no options are selected. After selecting it, it becomes the default.

Steps to reproduce:

1. Create a store with no shipping methods.
2. Add a product to the cart, login as a user with an address
3. Go to checkout page
4. In Commerce Manager, add a shipping service level for the region the address is in
5. Go to the checkout page again

Work around:
6. In Cortex studio, go to the defaultorder for the user
7. slect the shipping method in Studio
8. Go to the checkout page again.

Observed Results:

Step 3 shows the checkout flow, no shipping options available
Step 5 shows a completely blank screen
Step 8 shows the checkout flow, with a selected shipping option.

Step 1: Are you in the right place?

• For issues or feature requests related to the code in this repository file a Github issue.

Step 2: Describe your environment

• Device: N/A_
• OS version: N/A_
• Storefront pulled version: _____
• Node version: N/A_
• Docker version: N/A___
• Docker Compose version: N/A___

Step 3: Describe the problem:

I've updated the required configuration files, rebuilt the images and redeployed everything. However I'm still seeing mobee data and not vestri data.

Please note: I've deployed a LiveAndAuthor environment. I have an ec2 instance running in a different VPC and whitelisted to connect to EP ELB.

Steps to reproduce:

If I look at extensions/database/ext-
data/src/main/resources/data/liquibase-changelog.xml

this is my file

    <!-- The following sample/demo data is included by default from

the commerce-data project.
You should remove these includes once you have created
real data for your project. -->

    <include file="ep-blueprint-data/liquibase-changelog.xml"

relativeToChangelogFile="true" />

extensions/database/ext-
data/src/main/resources/environments/local/data-population.properties
liquibase.contexts=default,ep-blueprint

Then I rebuilt package,
Then re-ran the Pipeline for deployment which regenerated everything
including snapshots
I then removed the cloud stack for liveandauthor
Then reran the jenkins liveandauthor

Observed Results:

Site is loading with versti content but mobee data

Expected Results:

Content / data match

Relevant Code:

// TODO(you): code here to reproduce the problem

Step 1: Are you in the right place?

Yup!

Step 2: Describe your environment

Observed on Reference Store hosted on AWS S3, compiled with Node version mentioned below.

• Device: Macbook Pro (15-inc, 2018)
• OS version: OSX Version 10.14.6 (18G103)
• Storefront pulled version: v3.0.12 (commit fc249c8)
• Node version: v11.15.0
• Docker version: (Not relevant. Reference Store is statically-hosted)
• Docker Compose version: (Not relevant. Reference Store is statically-hosted)

Step 3: Describe the problem:

This is a really small visual issue, but I thought it was worth filing anyway.

When the Reference Store is in B2B mode and the user is logged in as a Buyer with a single cart, the Add To Cart dropdown doesn't quite cover the Add To Wishlist button. With the default styling, this produces the following:

Steps to reproduce:

1. Navigate to a B2B-enabled Reference Store on a PC/laptop
2. Log in as a Buyer user
3. Ensure you have a single cart
4. Navigate to a product page
5. Click the Add To Cart button

Observed Results:

• The dropdown partially overlaps the Add To Wish List button.
• The dropdown and the Add To Wish List button have identical styling.
• As a user, I'm a little unsure of what's happened. Is there another entry to the dropdown that's been cut off?

Expected Results:

• There should be some sort of visual distinction between the Add To Wish List button and the dropdown.

Step 1: Are you in the right place?

• For issues or feature requests related to the code in this repository file a Github issue.
• For issues relating to EP-Commerce, or Cloud Ops in relation to the reference store please Open a Support ticket.

Step 2: Describe your environment

Any reference b2b store

Issues submitted without sufficient information will be rejected.

• Device: mac/chrome_
• OS version: _____
• Storefront pulled version: latest image_
• Node version: _____
• Docker version: _____
• Docker Compose version: _____

Step 3: Describe the problem:

Steps to reproduce:

1. login with valid username and password_

2. ---

3. ---

Observed Results:

https://referenceb2b.elasticpath.com/oauth2/tokens returns error 405

It should probably be https://referenceb2b.elasticpath.com/*admin*/oauth2/tokens

• What happened? This could be a description, console log output, etc.

Expected Results:

Should be able to login successfully

Relevant Code:

// TODO(you): code here to reproduce the problem

Step 1: Are you in the right place?

• For issues or feature requests related to the code in this repository file a Github issue.
• For issues relating to EP-Commerce, or Cloud Ops in relation to the reference store please Open a Support ticket.

Step 2: Describe your environment

Issues submitted without sufficient information will be rejected.

• Device: Thinkpad P52
• OS version: Linux
• Storefront pulled version: v3.0.12
• Node version: v12.8.0
• Docker version: 1.23.2
• Docker Compose version: 19.03.2

Step 3: Describe the problem:

Issue occurs when trying to adding a configurable item to a multi cart as a registered user. Not a problem as a public user as no multi carts.

Steps to reproduce:

1. Log in as a registered user.
2. Find a item that has a cart item modifier
3. Fill in the fields for the cart item modifier.
4. Add the item to cart. Pick the default cart if there is more than one option.

Observed Results:

• What happened? This could be a description, console log output, etc.

The item does not get added to the cart, and the add to cart button has the spinner run indefinitely.

Error:

Item <itemsku> is a configurable product. Please add it individually using 'additemtocart' form

Expected Results:

• What did you expect to happen?
  Expected to have the item added to the specified cart.

Step 1: Are you in the right place?

• For issues or feature requests related to the code in this repository file a Github issue.
• For issues relating to EP-Commerce, or Cloud Ops in relation to the reference store please Open a Support ticket.

Step 2: Describe your environment

Issues submitted without sufficient information will be rejected.

• Device: mac_
• OS version: _____
• Storefront pulled version: e87213b_
• Node version: _____
• Docker version: _____
• Docker Compose version: _____

Step 3: Describe the problem:

Steps to reproduce:

1. login to b2b account
2. click magnify glass to search
3. insert " " (space), and hit enter to search

Observed Results:

• What happened? This could be a description, console log output, etc.
  endless spinning wheel

Expected Results:

expect message that no results found

• What did you expect to happen?

Relevant Code:

// TODO(you): code here to reproduce the problem

Step 2: Describe your environment

https://reference.elasticpath.com/ and http://epstorefront.net/
Any browser that has had it's cache cleared

Step 3: Describe the problem:

The following calls to Cortex are duplicated by the browser (same request params) if you hit page from a browser that has a cleared cache:

• https://reference.elasticpath.com/cortex/oauth2/tokens
• https://reference.elasticpath.com/cortex/?zoom=navigations:element,navigations:element:child
• https://reference.elasticpath.com/cortex/?zoom=lookups:itemlookupform

Steps to reproduce:

1. Clear your browser cache
2. Close and re-open browser
3. Open dev tools
4. Navigate to https://reference.elasticpath.com/
5. See the duplicate calls

Observed Results:

The calls to cortex show up twice

Expected Results:

There should be no reason to call the calls more than once.

Step 1: Are you in the right place?

• For issues or feature requests related to the code in this repository file a Github issue.
• For issues relating to EP-Commerce, or Cloud Ops in relation to the reference store please Open a Support ticket.

B2bSideMenu component does not show up in storybook.

Step 2: Describe your environment

Issues submitted without sufficient information will be rejected.

• Device: _____
• OS version: _____
• Storefront pulled version: _____
• Node version: _____
• Docker version: _____
• Docker Compose version: _____

Step 3: Describe the problem:

Within the storybook project there is no ui rendered for the B2bSideMenu component

Steps to reproduce:

1. Turn on storybook
2. Navigate to the b2bSideMenu component
3. Notice that the B2bSideMenu component does not appear

Observed Results:

• No visible ui for B2bSideMenu

Expected Results:

• To see visible ui for the b2bsidemenu

Relevant Code:

// TODO(you): code here to reproduce the problem

Step 1: Are you in the right place?

AppHeaderNavigation component does not show up in storybook due to requests to cortex not being mocked.

Step 2: Describe your environment

Issues submitted without sufficient information will be rejected.

• Device: _____
• OS version: _____
• Storefront pulled version: _____
• Node version: _____
• Docker version: _____
• Docker Compose version: _____

Step 3: Describe the problem:

Steps to reproduce:

Observed Results:

• What happened? This could be a description, console log output, etc.

Expected Results:

• What did you expect to happen?

Relevant Code:

// TODO(you): code here to reproduce the problem

Step 1: Are you in the right place?

• For issues or feature requests related to the code in this repository file a Github issue.
• For issues relating to EP-Commerce, or Cloud Ops in relation to the reference store please Open a Support ticket.

Step 2: Describe your environment

Issues submitted without sufficient information will be rejected.

• Device: MacOSX
• OS version: 10.14.5
• Storefront pulled version: 52f979f
• Node version: v11.13.0
• Docker version: _____
• Docker Compose version: _____

Step 3: Describe the problem:

Linking between the PDP page and bundle constituents as well as related products is broken

Steps to reproduce:

1. Connect the reference store to vestri catalog and the vestri_b2c scope
2. Head to WALL_CONNECTOR_AND_CABLE PDP (has crosssell merchandising associations).
3. Click on the related products.
4. Notice that the link to the page is broken.
5. Check links with bundled products as well

Observed Results:

• The page will route to the incorrect PDP url.

Expected Results:

• Expected to route to the correct page

Relevant Code:

Step 2: Describe your environment

https://reference.elasticpath.com/ and http://epstorefront.net/
Any browser

Step 3: Describe the problem:

There are several high res images that we scale to a smaller size. They remain small even as the viewport of the browser increases. This leads me to believe that their extra resolution is not being used in our responsive design. As such the images should be scaled to their max display size.

For instance:

• brake-icon.jpg is 483 x 483 but is scaled to 161 x 161
• warranty-graphic.jpg is 411 x 411 but is scaled to 161 x 161
• charging-icon.jpg is 414 x 414 but is scaled to 161 x 161

Steps to reproduce:

Run test at https://www.webpagetest.org against https://reference.elasticpath.com/ on results page click on Image analysis

Observed Results:

Images being server are larger than they display.

Expected Results:

The maximum size of the saved image should not exceed the maximum size at which it will be displayed.

Step 2: Describe your environment

https://reference.elasticpath.com/
Any browser that has had it's cache cleared

Step 3: Describe the problem:

We fetch the index.html twice on the homepage if the browser has a clean cache.

Steps to reproduce:

1. Clear your browser cache
2. Close and re-open browser
3. Open dev tools
4. Navigate to https://reference.elasticpath.com/
5. See the duplicate calls for index.html

Observed Results:

2 calls to fetch https://reference.elasticpath.com/index.html

Expected Results:

1 call to fetch https://reference.elasticpath.com/index.html

• Device: Chrome
• OS version: MACOS 10.13.3
• Storefront pulled version: 047526a
• Node version: v11.5.0
• Docker version: NA
• Docker Compose version: NA

Step 3: Describe the problem:

Steps to reproduce:

1. Head to Buy-it-again option in the order details page
2. Click to open modal

Observed Results:

Styling is not aligned for item within buy again modal

Expected Results:

Items to be aligned in the modal