[PWA-1124] Browsing and Viewing Virtual product

[tjwiebell]

Description

As a Merchant I want to be able to showcase products that don't require delivery on PWA storefront without customization so that I decrease the time required to launch a PWA storefront and TTC of it

Preconditions

• Website with two store veiwes (store view 1 and store view 2) created
• Virtual product created in Admin
• Virtual product includes localization for each store view
• Product attribute Product sub-type exists
• Product sub-type attribute value is set to Service on the virtual product
• Home Page includes product listing with virtual product
• User is not logged into storefront account

Acceptance Criteria

• User opens home page and sees virtual product tile that includes:
  ** product image (role: small)
  ** product title
  ** product sub-type (powered by new system attribute)
  ** Product price
• User opens a category that includes virtual product and sees virtual product tile
• User navigates to the product details page from the product tile
• User sees product details page loaded with the product information displayed as designed
• User can change the language (store view) and sees the product information to be localized
• User reviews product information
• User can't add a product to the cart in the scope of this story

Test Plan

• Virtual product should be visible on Home page and on any other CMS pages.
• Virtual product category should be listed as a circle on home page when PB data is not present.
• Respective category should be able to list -
  ** Only Virtual Product. Also check sort/filters works.
  ** Combination of Virtual and other Products. Also check sort/filters works.
• User should be landed on Virtual PDP on accessing from Category list.
• Verify above scenarios on on second store view and make sure data loads as per configs like language, currency.
• Verify Offline mode works for Home, Category, PDP which have Virtual product.
• Run Lighthouse/WPT on virtual product category list and PDP.
• Run MFTF
• Check UI scenarios on Chrome, FF, Safari desktop mode. And on Mobile iOS Safari and Android Chrome.
• {color:#de350b}PENDING - subtype attribute scenarios.{color}

Related Issue

• [PWA-1124]

Acceptance

Verification Stakeholders

Specification

Verification Steps

1. Make sure you're using a backend that has sub_type defined as described in this request
2. Add @magento/venia-virtual-products to @magento/venia-concept/package.json && yarn
3. Run through test plan and verify created virtual products using this new attribute render as expected

Screenshots / Screen Captures (if appropriate)

Checklist

• I have added tests to cover my changes, if necessary.
• I have added translations for new strings, if necessary.
• I have updated the documentation accordingly, if necessary.

[PWAStudioBot]

	Messages
📖	Associated JIRA tickets: PWA-1124.
📖	DangerCI Failures related to missing labels/description/linked issues/etc will persist until the next push or next nightly build run (assuming they are fixed).
📖	Access a deployed version of this PR here. Make sure to wait for the "pwa-pull-request-deploy" job to complete.

Generated by 🚫 dangerJS against fece0ee

[fooman]

I have concerns around the underlying requirements for the back-end. sub_type should not be something that the store front needs to add as a requirement for the back-end nor should the implementation be tied against it.

Using Custom Product Options (a default Magento Core feature) are perfectly capable of covering the use case of 1,2,3 years. It is something that

1. Magento does out of the box
2. it already has graphql support
3. works once added to cart

options: [CustomizableOptionInterface]
An array of options for a customizable product.

Otherwise Service really just looks like a category to me or two options taken together.

[fooman]

Can list of supported product types be made a target in venia? Extensions can then add to this list.

[tjwiebell]

I have concerns around the underlying requirements for the back-end. sub_type should not be something that the store front needs to add as a requirement for the back-end nor should the implementation be tied against it.

@fooman - In full agreement here, which is why we've approached rendering this attribute as an extension. We're a bit limited by GraphQL in scope of attributes, since they currently modify the ProductInterface schema, and we have no configuration or metadata to know what has been added to the system. All remaining general functionality about virtual products (eg. custom attributes) will likely still reside in the core packages and not in this extension.

[fooman]

@tjwiebell I had hoped that new functionality was going to be built exclusively via extensions. So if you are not using virtual products you can just turn it off. Hence this PR would be the default core implementation for this.

I still believe sub_type is more effort that could be spent on something that might have broader applicability (if really needed for a show case / sample implementation).

Essentially this

and graphql provides it via something like

        ...on CustomizableProductInterface {
            options {
                __typename
                option_id
                title
                sort_order
                required
                ...on CustomizableOptionInterface {

[fooman]

If this implementation is not going to be the final core implementation it would make sense to follow the sample naming convention and not use up the logical name.

Suggested change

	"name": "@magento/venia-virtual-products",
	"name": "@magento/venia-sample-virtual-products",

[tjwiebell]

Good call out, I've gone ahead and made this change since this is really for reference given our specific sample data.

[eug123]

• Virtual product should be visible on Home page and on any other CMS pages.
• Virtual product category should be listed as a circle on home page when PB data is not present.
• Respective category should be able to list -
  ** Only Virtual Product. Also check sort/filters works.
  ** Combination of Virtual and other Products. Also check sort/filters works.
• User should be landed on Virtual PDP on accessing from Category list.
• Verify above scenarios on on second store view and make sure data loads as per configs like language, currency.
• Verify Offline mode works for Home, Category, PDP which have Virtual product.
• Run Lighthouse/WPT on virtual product category list and PDP.
• Run MFTF
• Check UI scenarios on Chrome, FF, Safari desktop mode. And on Mobile iOS Safari and Android Chrome.

[dpatil-magento]

Verified sub_type attribute scenarios, looks good. QA approved