Feature/variants productization

libs/domain/product/attributes/src/attributes.component.ts

@@ -1,14 +1,17 @@
 import { ContentMixin, defaultOptions } from '@oryx-frontend/experience';
 import { PRODUCT, ProductContext, ProductMixin } from '@oryx-frontend/product';
 import { featureVersion, hydrate, ssrShim } from '@oryx-frontend/utilities';
 import { LitElement, TemplateResult, html } from 'lit';
 import { ProductAttributesOptions } from './attributes.model';
 import { productAttributeStyles } from './attributes.styles';
 
 @ssrShim('style')
-@defaultOptions({ columnCount: '2' })
+@defaultOptions({
+  columnCount: '2',
+  ...(featureVersion >= '1.5' ? { highlightVariantAttribute: true } : {}),
+})
 @hydrate({ context: featureVersion >= '1.4' ? PRODUCT : ProductContext.SKU })
 export class ProductAttributesComponent extends ProductMixin(
   ContentMixin<ProductAttributesOptions>(LitElement)
 ) {
   static styles = [productAttributeStyles];
@@ -23,13 +26,30 @@
         ${Object.keys(names).map(
           (key) => html`
             <dt>${this.getName(names, key)}</dt>
-            <dd>${values[key]}</dd>
+            <dd ?highlight=${this.isHighlighted(key)}>${values[key]}</dd>
           `
         )}
       </dl>
     `;
   }
 
+  /**
+   * Highlighted attributes will clarify the uniqueness of the value among
+   * the variants.
+   *
+   * Indicates whether the attribute value should be highlighted, based on
+   * a global component configuration and if the attribute is part of the
+   * variant definition.
+   *
+   * @since 1.5
+   */
+  protected isHighlighted(key: string): boolean {
+    const { variantDefinition } = this.$product() ?? {};
+    return (
+      !!this.$options().highlightVariantAttribute && !!variantDefinition?.[key]
+    );
+  }
+
   protected getName(
     names: Record<string, string>,
     key: string

libs/domain/product/attributes/src/attributes.model.ts

@@ -1,3 +1,11 @@
 export interface ProductAttributesOptions {
   columnCount?: string;
+  /**
+   * Highlighted variant attributes will clarify the uniqueness of the value among
+   * the variants. If the attribute is unqieu to the variant, a highlight attribute
+   * is added, so that the stylesheet can mark the attribute value.
+   *
+   * @since 1.5
+   */
+  highlightVariantAttribute?: boolean;
 }

libs/domain/product/attributes/src/attributes.styles.ts

@@ -16,4 +16,13 @@ export const productAttributeStyles = css`
     margin-block: 10px 20px;
     color: var(--oryx-color-neutral-9);
   }
+
+  dd[highlight] {
+    background: var(--oryx-color-primary-4);
+    color: initial;
+    border-radius: 8px;
+    padding: 1px 6px;
+    margin-inline-start: -6px;
+    width: fit-content;
+  }
 `;

libs/domain/product/src/components.ts

@@ -14,3 +14,4 @@ export * from '../media/src/media.def';
 export * from '../price/src/price.def';
 export * from '../relations/relations.def';
 export * from '../title/src/title.def';
+export * from '../variant-selector/variant-selector.def';

libs/domain/product/src/mocks/src/mock-product.service.ts

@@ -100,6 +100,15 @@ export class MockProductService implements Partial<ProductService> {
         availability: true,
       },
       categoryIds: ['category id 1'],
+      variants: {
+        'variant-1': { brand: 'Brand1', color: 'color1' },
+        'variant-2': { brand: 'Brand1', color: 'green' },
+        'variant-3': { brand: 'Brand1', color: 'blue' },
+      },
+      variantDefinition: {
+        brand: ['Brand1'],
+        color: ['color1', 'green', 'blue'],
+      },
     },
     {
       sku: '2',
@@ -138,6 +147,14 @@ export class MockProductService implements Partial<ProductService> {
         availability: false,
       },
       categoryIds: ['category id 2'],
+      variantDefinition: {
+        brand: ['Brand2'],
+        color: ['red', 'green', 'blue'],
+      },
+      variants: {
+        'variant-1': { brand: 'Brand2', color: 'color2' },
+        'variant-2': { brand: 'Brand3' },
+      }
     },
     {
       sku: '3',
@@ -291,7 +308,6 @@ export class MockProductService implements Partial<ProductService> {
           'Sample attribute lengthy name, Sample attribute lengthy name, Sample attribute lengthy name.',
       },
     },
-
     {
       sku: 'single-image',
       name: 'Sample product with one image',
@@ -326,6 +342,59 @@ export class MockProductService implements Partial<ProductService> {
       discontinued: true,
       discontinuedNote: 'This product is discontinued...',
     },
+    {
+      sku: 'variant-selector',
+      name: 'Product with Variants',
+      mediaSet,
+      description: 'This product has multiple variants to choose from.',
+      price: {
+        defaultPrice: {
+          currency: 'EUR',
+          value: 1999,
+          isNet: true,
+        },
+        originalPrice: {
+          currency: 'EUR',
+          value: 2499,
+          isNet: true,
+        },
+      },
+      averageRating: 4.5,
+      reviewCount: 10,
+      attributes: {
+        brand: 'Brand9',
+        color: 'red',
+        size: 'M',
+      },
+      attributeNames: {
+        brand: 'Brand',
+        color: 'Color',
+        size: 'Size',
+      },
+      labels: [newLabel, saleLabel],
+      availability: {
+        quantity: 5,
+        isNeverOutOfStock: false,
+        availability: true,
+      },
+      categoryIds: ['category id 9'],
+      variants: {
+        'variant-1': { brand: 'Brand9', color: 'red', size: 'S' },
+        'variant-2': { brand: 'Brand9', color: 'red', size: 'M' },
+        'variant-3': { brand: 'Brand9', color: 'red', size: 'L' },
+        'variant-4': { brand: 'Brand9', color: 'green', size: 'S' },
+        'variant-5': { brand: 'Brand9', color: 'green', size: 'M' },
+        'variant-6': { brand: 'Brand9', color: 'green', size: 'L' },
+        'variant-7': { brand: 'Brand9', color: 'blue', size: 'S' },
+        'variant-8': { brand: 'Brand9', color: 'blue', size: 'M' },
+        'variant-9': { brand: 'Brand9', color: 'blue', size: 'L' },
+      },
+      variantDefinition: {
+        brand: ['Brand9'],
+        color: ['red', 'green', 'blue'],
+        size: ['S', 'M', 'L'],
+      },
+    }
   ];
 
   get(qualifier: ProductQualifier): Observable<Product> {

libs/domain/product/src/models/product.api.model.ts

@@ -20,12 +20,28 @@ export module ApiProductModel {
     id?: string;
     isDiscontinued?: boolean;
     productAbstractSku?: string;
+
+    /**
+     * Reference to the abstract product(s).
+     */
+    abstractProducts: Abstract[];
+    /**
+     * Reference to the concrete variations. This includes the current SKU.
+     */
+    concreteProducts: Concrete[];
   }
 
   export interface Abstract extends Attributes {
-    attributeMap?: string[][];
+    attributeMap?: {
+      superAttributes?: Record<string, string[]>;
+      attributeVariantMap?: Record<string, Record<string, string>>;
+    };
     merchantReference?: string;
     superAttributes?: string[];
+    /**
+     * Reference to the concrete variations. This includes the current SKU.
+     */
+    concreteProducts: Concrete[];
   }
 
   export interface Image {
@@ -121,7 +137,8 @@ export module ApiProductModel {
     | Include<Includes.ConcreteProductAvailabilities, ProductAvailability>
     | Include<Includes.Labels, ProductLabels>
     | Include<Includes.AbstractProducts, Abstract>
-    | Include<Includes.CategoryNodes, CategoryNodes>;
+    | Include<Includes.CategoryNodes, CategoryNodes>
+    | Include<Includes.ConcreteProducts, Concrete>;
 
   export type Response = JsonApiModel<Concrete, ResponseIncludes[]>;
 }

libs/domain/product/src/models/product.model.ts

@@ -43,6 +43,12 @@ export interface Product {
   availability?: ProductAvailability;
   discontinued?: boolean;
   discontinuedNote?: string;
+  /**
+   * Holds variants of the current product. We only keep track of the SKU, so
+   * that additional product data must be resolved from the product service.
+   */
+  variants?: Record<string, Record<string, string>>;
+  variantDefinition?: Record<string, string[]>;
 }
 
 export interface ProductLabel {

libs/domain/product/src/services/adapter/normalizers/concrete-products/concrete-products.normalizer.ts

@@ -20,20 +20,24 @@ export function concreteProductsNormalizer(
   return combineLatest(
     data
       .filter((abstract) => abstract[concreteProductsKey]?.length)
-      .map((abstract) =>
-        combineLatest([
-          transformer.transform(
-            abstract[concreteProductsKey]?.[0],
-            ProductNormalizer
-          ),
+      .map((abstract) => {
+        const concretes = abstract[concreteProductsKey];
+        const concrete = abstract[concreteProductsKey][0];
+
+        if (concrete.abstractProducts) {
+          concrete.abstractProducts[0][concreteProductsKey] = concretes;
+        }
+
+        return combineLatest([
+          transformer.transform(concrete, ProductNormalizer),
           transformer.transform(abstract[categoryKey], CategoryIdNormalizer),
         ]).pipe(
           map(([product, nodeId]) => ({
             ...product,
             ...nodeId,
           }))
-        )
-      )
+        );
+      })
   );
 }
 

libs/domain/product/src/services/adapter/normalizers/product/model.ts

@@ -10,4 +10,5 @@ export type DeserializedProduct = ApiProductModel.Concrete &
     | CamelCase<ApiProductModel.Includes.Labels>
     | CamelCase<ApiProductModel.Includes.ConcreteProductAvailabilities>
     | CamelCase<ApiProductModel.Includes.AbstractProducts>
+    | CamelCase<ApiProductModel.Includes.ConcreteProducts>
   >;

libs/domain/product/src/services/adapter/normalizers/product/product.normalizer.ts

@@ -25,7 +25,6 @@ export function productAttributeNormalizer(
     attributes,
     attributeNames,
   } = data;
-
   return {
     sku,
     name,
@@ -129,6 +128,45 @@ export function productCategoryNormalizer(
   return transformer.transform(node, CategoryNormalizer);
 }
 
+export function productVariantNormalizer(
+  data: DeserializedProduct
+): Partial<Product> {
+  const { abstractProducts } = data;
+
+  const abstract = abstractProducts?.[0];
+
+  const variantMap = abstract.attributeMap?.attributeVariantMap;
+  const variantDefinition = abstract.attributeMap?.superAttributes;
+
+  if (!variantDefinition) {
+    return {};
+  }
+
+  if (variantMap) {
+    const variantMapEntries = Object.entries(variantMap);
+
+    const variants = variantMapEntries.reduce((skuMap, [_, mapAttributes]) => {
+      const matchingVariant = abstract.concreteProducts.find(
+        (variant) =>
+          variant.attributes &&
+          Object.keys(mapAttributes).every(
+            (attrKey) => variant.attributes![attrKey] === mapAttributes[attrKey]
+          )
+      );
+
+      if (matchingVariant && matchingVariant.sku) {
+        skuMap[matchingVariant.sku] = mapAttributes;
+      }
+
+      return skuMap;
+    }, {} as Record<string, Record<string, string>>);
+
+    return { variants, variantDefinition };
+  }
+
+  return {};
+}
+
 export const productNormalizer: Provider[] = [
   {
     provide: ProductNormalizer,
@@ -162,6 +200,10 @@ export const productNormalizer: Provider[] = [
     provide: ProductNormalizer,
     useValue: productCategoryNormalizer,
   },
+  {
+    provide: ProductNormalizer,
+    useValue: productVariantNormalizer,
+  },
 ];
 
 declare global {

libs/domain/product/src/services/adapter/product-includes.ts

@@ -8,6 +8,7 @@ export const productIncludes = provideIncludes(PRODUCT, [
   ApiProductModel.Includes.ConcreteProductAvailabilities,
   ApiProductModel.Includes.Labels,
   ApiProductModel.Includes.AbstractProducts,
+  ApiProductModel.Includes.ConcreteProducts,
   {
     include: ApiProductModel.Includes.CategoryNodes,
     fields: [

libs/domain/product/variant-selector/index.ts

@@ -0,0 +1,2 @@
+export * from './variant-selector.component';
+export * from './variant-selector.styles';

libs/domain/product/variant-selector/stories/demo.stories.ts

@@ -0,0 +1,19 @@
+import { MockProductService } from '@oryx-frontend/product/mocks';
+import { Meta, Story } from '@storybook/web-components';
+import { TemplateResult, html } from 'lit';
+import { storybookPrefix } from '../../.constants';
+
+export default {
+  title: `${storybookPrefix}/Variant selector`,
+  parameters: {
+    chromatic: {
+      disableSnapshot: true,
+    },
+  },
+} as Meta;
+
+const Template: Story = (): TemplateResult => {
+  return html`<oryx-product-variant-selector sku="variant-selector"></oryx-product-variant-selector>`;
+};
+
+export const Demo = Template.bind({});

libs/domain/product/variant-selector/stories/static.stories.ts

@@ -0,0 +1,26 @@
+import { MockProductService } from '@oryx-frontend/product/mocks';
+import { Meta, Story } from '@storybook/web-components';
+import { TemplateResult, html } from 'lit';
+import { storybookPrefix } from '../../.constants';
+
+export default {
+  title: `${storybookPrefix}/Variant selector/Static`,
+} as unknown as Meta;
+
+const Template: Story<unknown> = (): TemplateResult => {
+  return html`
+    <section>
+      <h3>3 variants:</h3>
+      <oryx-product-variant-selector sku="variant-selector"></oryx-product-variant-selector>
+    </section>
+    <section>
+      <h3>2 variants:</h3>
+      <oryx-product-variant-selector sku="1"></oryx-product-variant-selector>
+    </section>
+    <section>
+      <h3>Color variants disabled:</h3>
+      <oryx-product-variant-selector sku="2"></oryx-product-variant-selector>
+    </section>
+  `;
+}
+export const Variations = Template.bind({});