[PWA-1124] Browsing and Viewing Virtual product

jest.config.js

@@ -275,6 +275,11 @@ const jestConfig = {
                 path.join('<rootDir>', 'scripts', 'jest-backend-setup.js')
             ]
         })),
+        configureProject(
+            'extensions/venia-sample-virtual-products',
+            'Venia Virtual Products',
+            inPackage => testReactComponents(inPackage)
+        ),
         configureProject(
             'extensions/venia-sample-payments-checkmo',
             'Check Money Order Payment',

packages/extensions/venia-sample-virtual-products/intercept.js

@@ -0,0 +1,26 @@
+module.exports = targets => {
+    targets.of('@magento/pwa-buildpack').specialFeatures.tap(features => {
+        features[targets.name] = {
+            cssModules: true,
+            esModules: true,
+            graphqlQueries: true
+        };
+    });
+
+    const { talons } = targets.of('@magento/peregrine');
+
+    talons.tap(hooks => {
+        const useCategory = hooks.RootComponents.Category.useCategory;
+        useCategory.wrapWith(
+            '@magento/venia-sample-virtual-products/src/wrapUseCategory'
+        );
+    });
+
+    const { categoryListProductAttributes } = targets.of('@magento/venia-ui');
+    categoryListProductAttributes.tap(target => {
+        target.insertAfterJSX({
+            matcher: 'Link className={classes.name}',
+            importStatement: `import SubTypeAttribute from '@magento/venia-sample-virtual-products/src/components/SubTypeAttribute'`
+        });
+    });
+};

packages/extensions/venia-sample-virtual-products/package.json

@@ -0,0 +1,25 @@
+{
+  "name": "@magento/venia-sample-virtual-products",
+  "version": "0.0.1",
+  "publishConfig": {
+    "access": "public"
+  },
+  "description": "Adds support for additional fields when rendering virtual products",
+  "main": "./intercept.js",
+  "scripts": {
+    "clean": " "
+  },
+  "repository": "github:magento/pwa-studio",
+  "license": "(OSL-3.0 OR AFL-3.0)",
+  "peerDependencies": {
+    "@apollo/client": "~3.1.2",
+    "@magento/peregrine": "~9.0.0",
+    "@magento/pwa-buildpack": "~8.0.1",
+    "@magento/venia-ui": "~6.0.1"
+  },
+  "pwa-studio": {
+    "targets": {
+      "intercept": "./intercept"
+    }
+  }
+}

packages/extensions/venia-sample-virtual-products/src/__tests__/wrapUseCategory.spec.js

@@ -0,0 +1,19 @@
+import wrapUseCategory from '../wrapUseCategory';
+
+jest.mock('../category.gql', () => ({
+    GET_CATEGORY: jest.fn().mockName('GET_CATEGORY')
+}));
+
+test('injects custom query into talon props', () => {
+    const mockTalon = jest.fn();
+    wrapUseCategory(mockTalon)({ talonProp: 'should be untouched' });
+
+    expect(mockTalon.mock.calls[0][0]).toMatchInlineSnapshot(`
+        Object {
+          "operations": Object {
+            "getCategoryQuery": [MockFunction GET_CATEGORY],
+          },
+          "talonProp": "should be untouched",
+        }
+    `);
+});

packages/extensions/venia-sample-virtual-products/src/category.gql.js

@@ -0,0 +1,35 @@
+import { gql } from '@apollo/client';
+
+import {
+    CategoryFragment,
+    ProductsFragment
+} from '@magento/peregrine/lib/talons/RootComponents/Category/categoryFragments.gql';
+
+export const GET_CATEGORY = gql`
+    query GetCategoriesWithSubType(
+        $id: Int!
+        $pageSize: Int!
+        $currentPage: Int!
+        $filters: ProductAttributeFilterInput!
+        $sort: ProductAttributeSortInput
+    ) {
+        category(id: $id) {
+            id
+            ...CategoryFragment
+        }
+        products(
+            pageSize: $pageSize
+            currentPage: $currentPage
+            filter: $filters
+            sort: $sort
+        ) {
+            items {
+                id
+                sub_type
+            }
+            ...ProductsFragment
+        }
+    }
+    ${CategoryFragment}
+    ${ProductsFragment}
+`;

packages/extensions/venia-sample-virtual-products/src/components/SubTypeAttribute/__tests__/subTypeAttribute.spec.js

@@ -0,0 +1,58 @@
+import React from 'react';
+import { useQuery } from '@apollo/client';
+import createTestInstance from '@magento/peregrine/lib/util/createTestInstance';
+
+import SubTypeAttribute from '../subTypeAttribute';
+
+jest.mock('@apollo/client', () => ({
+    gql: jest.fn(),
+    useQuery: jest.fn().mockReturnValue({})
+}));
+
+test('renders null without sub_type', () => {
+    const tree = createTestInstance(<SubTypeAttribute item={{ id: 1 }} />);
+
+    expect(tree.toJSON()).toMatchInlineSnapshot(`null`);
+});
+
+test('renders skeleton while fetching attribute metadata', () => {
+    const tree = createTestInstance(
+        <SubTypeAttribute item={{ id: 1, sub_type: 123 }} />
+    );
+
+    expect(tree.toJSON()).toMatchInlineSnapshot(`
+        <span
+          className="root"
+        />
+    `);
+});
+
+test('renders attribute label with metadata', () => {
+    useQuery.mockReturnValue({
+        data: {
+            customAttributeMetadata: {
+                items: [
+                    {
+                        attribute_options: [
+                            { label: 'Consultation', value: 456 },
+                            { label: 'Service', value: 123 },
+                            { label: 'Donation', value: 789 }
+                        ]
+                    }
+                ]
+            }
+        }
+    });
+
+    const tree = createTestInstance(
+        <SubTypeAttribute item={{ id: 1, sub_type: 123 }} />
+    );
+
+    expect(tree.toJSON()).toMatchInlineSnapshot(`
+        <span
+          className="root"
+        >
+          Service
+        </span>
+    `);
+});

packages/extensions/venia-sample-virtual-products/src/components/SubTypeAttribute/index.js

@@ -0,0 +1 @@
+export { default } from './subTypeAttribute';

packages/extensions/venia-sample-virtual-products/src/components/SubTypeAttribute/subTypeAttribute.css

@@ -0,0 +1,9 @@
+.root {
+    color: rgb(var(--venia-global-color-text-hint));
+    font-size: var(--venia-typography-detail-L-fontSize);
+}
+
+.root:empty {
+    background-color: rgb(var(--venia-global-color-gray));
+    min-height: 1rem;
+}

packages/extensions/venia-sample-virtual-products/src/components/SubTypeAttribute/subTypeAttribute.gql.js

@@ -0,0 +1,22 @@
+import { gql } from '@apollo/client';
+
+const GET_ATTRIBUTE_METADATA = gql`
+    query GetSubtypeMetadata {
+        customAttributeMetadata(
+            attributes: [
+                { attribute_code: "sub_type", entity_type: "catalog_product" }
+            ]
+        ) {
+            items {
+                attribute_options {
+                    label
+                    value
+                }
+            }
+        }
+    }
+`;
+
+export default {
+    getAttributeMetadataQuery: GET_ATTRIBUTE_METADATA
+};

packages/extensions/venia-sample-virtual-products/src/components/SubTypeAttribute/subTypeAttribute.js

@@ -0,0 +1,33 @@
+import React, { useMemo } from 'react';
+
+import classes from './subTypeAttribute.css';
+import operations from './subTypeAttribute.gql';
+import { useQuery } from '@apollo/client';
+
+const SubTypeAttribute = props => {
+    const { item } = props;
+    const { sub_type } = item;
+
+    const { getAttributeMetadataQuery } = operations;
+    const { data } = useQuery(getAttributeMetadataQuery, {
+        skip: !sub_type
+    });
+
+    const attributeLabel = useMemo(() => {
+        if (!sub_type || !data) return null;
+
+        const attributeOptions =
+            data.customAttributeMetadata.items[0].attribute_options;
+        const attributeOption = attributeOptions.find(
+            attribute => attribute.value == sub_type
+        );
+
+        return attributeOption.label;
+    }, [data, sub_type]);
+
+    if (!sub_type) return null;
+
+    return <span className={classes.root}>{attributeLabel}</span>;
+};
+
+export default SubTypeAttribute;

packages/extensions/venia-sample-virtual-products/src/wrapUseCategory.js

@@ -0,0 +1,14 @@
+import { GET_CATEGORY } from './category.gql';
+
+const wrapUseCategory = original => props => {
+    const newProps = {
+        ...props,
+        operations: {
+            getCategoryQuery: GET_CATEGORY
+        }
+    };
+
+    return original(newProps);
+};
+
+export default wrapUseCategory;

packages/peregrine/lib/talons/ProductFullDetail/__tests__/useProductFullDetail.spec.js

@@ -138,3 +138,24 @@ test('sets isAddToCartDisabled true if add simple mutation is loading', () => {
 
     expect(talonProps.isAddToCartDisabled).toBe(true);
 });
+
+test('returns correct value for supported product type', () => {
+    const tree = createTestInstance(<Component {...defaultProps} />);
+
+    const { root } = tree;
+    const { talonProps: talonProps1 } = root.findByType('i').props;
+
+    tree.update(
+        <Component
+            product={{
+                ...defaultProps.product,
+                __typename: 'Unsupported Type'
+            }}
+        />
+    );
+
+    const { talonProps: talonProps2 } = root.findByType('i').props;
+
+    expect(talonProps1.isSupportedProductType).toBe(true);
+    expect(talonProps2.isSupportedProductType).toBe(false);
+});

packages/peregrine/lib/talons/ProductFullDetail/useProductFullDetail.js

@@ -159,6 +159,7 @@ const SUPPORTED_PRODUCT_TYPES = ['SimpleProduct', 'ConfigurableProduct'];
  *  handleSelectionChange: func,
  *  handleSetQuantity: func,
  *  isAddToCartDisabled: boolean,
+ *  isSupportedProductType: boolean,
  *  mediaGalleryEntries: array,
  *  productDetails: object,
  *  quantity: number
@@ -315,10 +316,8 @@ export const useProductFullDetail = props => {
         handleAddToCart,
         handleSelectionChange,
         isAddToCartDisabled:
-            !isSupportedProductType ||
-            isMissingOptions ||
-            isAddConfigurableLoading ||
-            isAddSimpleLoading,
+            isMissingOptions || isAddConfigurableLoading || isAddSimpleLoading,
+        isSupportedProductType,
         mediaGalleryEntries,
         productDetails
     };

packages/peregrine/lib/talons/RootComponents/Category/category.gql.js

@@ -1,5 +1,7 @@
 import { gql } from '@apollo/client';
 
+import { CategoryFragment, ProductsFragment } from './categoryFragments.gql';
+
 export const GET_CATEGORY = gql`
     query GetCategories(
         $id: Int!
@@ -10,46 +12,19 @@ export const GET_CATEGORY = gql`
     ) {
         category(id: $id) {
             id
-            description
-            name
-            product_count
-            meta_title
-            meta_keywords
-            meta_description
+            ...CategoryFragment
         }
         products(
             pageSize: $pageSize
             currentPage: $currentPage
             filter: $filters
             sort: $sort
         ) {
-            items {
-                # id is always required, even if the fragment includes it.
-                id
-                # TODO: Once this issue is resolved we can use a
-                # GalleryItemFragment here:
-                # https://github.com/magento/magento2/issues/28584
-                name
-                price {
-                    regularPrice {
-                        amount {
-                            currency
-                            value
-                        }
-                    }
-                }
-                small_image {
-                    url
-                }
-                url_key
-                url_suffix
-            }
-            page_info {
-                total_pages
-            }
-            total_count
+            ...ProductsFragment
         }
     }
+    ${CategoryFragment}
+    ${ProductsFragment}
 `;
 
 export const GET_FILTER_INPUTS = gql`