Feature/code reference minicart

CHANGELOG.md

@@ -7,6 +7,9 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 
 ## [Unreleased]
 
+### Added
+- New component called 'product-reference', where is possible to pull an identifier product information.
+
 ## [0.25.0] - 2020-10-27
 
 ### Added

docs/README.md

@@ -255,6 +255,7 @@ Therefore, in order to customize the `product-list` configuration, you can simpl
 | `product-list-content-mobile` | Creates the product list layout for mobile devices. |
 | `message` | Renders a message text about the product availability. | 
 | `product-name` | Renders the product names. | 
+| `product-reference` | Renders the product reference information. | 
 | `price` | Renders the product prices. | 
 | `unit-price` | Renders the price for each product unit added to the cart. | 
 | `product-list-image` | Renders the product images. | 
@@ -298,6 +299,13 @@ Therefore, in order to customize the `product-list` configuration, you can simpl
 | ---------------------- | --------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------- |
 | `width`    | `number`    | Product image width (in pixels).  | `96`    |
 
+### `product-reference` props
+
+| Prop name               |  Type         | Description                                        | Default value   |
+| :------------------: | :---------: | :---------------------------------: | :-------------: |
+| `identifierLabel`    | `string`    | Text label to be displayed to the left of the product reference value.  | `undefined`    |
+| `identifierOption`    | `enum`    | Desired product reference data i.e. product identifier to be displayed. Possible options are: `ProductId`, `ProductSkuItemId`, `ProductReferenceId`, and `ProductSkuReferenceId`. | `ProductReferenceId`    |
+
 ### `remove-button` props
 
 | Prop name              | Type      | Description                                                                                                                                                                                                                                     | Default value |
@@ -326,6 +334,9 @@ In order to apply CSS customizations in this and other blocks, follow the instru
 | `productPriceCurrency`               |
 | `productPrice`                       |
 | `productQuantityLabel`               |
+| `productIdentifier`                  |
+| `productIdentifierValue`             |
+| `productIdentifierLabelValue`        |
 | `productVariationsContainer`         |
 | `productVariationsItem`              |
 | `quantityDropdownContainer`          |
@@ -340,7 +351,6 @@ In order to apply CSS customizations in this and other blocks, follow the instru
 | `unitPriceMeasurementUnit`           |
 | `unitPricePerUnitCurrency`           |
 
-
 <!-- DOCS-IGNORE:start -->
 
 ## Contributors ✨

react/ProductReference.tsx

@@ -0,0 +1,68 @@
+import React, { FunctionComponent, useState, useEffect } from 'react'
+import { Loading } from 'vtex.render-runtime'
+import { useCssHandles } from 'vtex.css-handles'
+
+import { useItemContext } from './ItemContext'
+import { opaque } from './utils/opaque'
+import {
+  PRODUCT_REFERENCE_ID,
+  PRODUCT_SKU_REFERENCE_ID,
+  PRODUCT_ID,
+  PRODUCT_SKU_ITEM_ID,
+} from './constants/Identifiers'
+
+const CSS_HANDLES = [
+  'productIdentifier',
+  'productIdentifierValue',
+  'productIdentifierLabelValue',
+] as const
+
+interface Props {
+  identifierLabel?: string
+  identifierOption?: string
+}
+
+const ProductReference: FunctionComponent<Props> = props => {
+  const { identifierOption = PRODUCT_REFERENCE_ID, identifierLabel } = props
+  const { item, loading } = useItemContext()
+  const handles = useCssHandles(CSS_HANDLES)
+
+  const [identifierValue, setIdentifierValue] = useState<
+    string | null | undefined
+  >()
+
+  useEffect(() => {
+    if (identifierOption === PRODUCT_REFERENCE_ID) {
+      setIdentifierValue(item.productRefId)
+    } else if (identifierOption === PRODUCT_SKU_REFERENCE_ID) {
+      setIdentifierValue(item.refId)
+    } else if (identifierOption === PRODUCT_SKU_ITEM_ID) {
+      setIdentifierValue(item.id)
+    } else if (identifierOption === PRODUCT_ID) {
+      setIdentifierValue(item.productId)
+    }
+  }, [item.productRefId, identifierOption, item.id, item.productId, item.refId])
+
+  if (loading) {
+    return <Loading />
+  }
+
+  return identifierValue ? (
+    <div
+      className={`c-on-base t-title lh-copy fw6 no-underline fw5-m ${
+        handles.productIdentifier
+      } ${opaque(item.availability)}`}
+    >
+      {identifierLabel && (
+        <span className={`${handles.productIdentifierLabelValue}`}>
+          {identifierLabel}
+        </span>
+      )}
+      <span className={`${handles.productIdentifierValue}`}>
+        {identifierValue}
+      </span>
+    </div>
+  ) : null
+}
+
+export default ProductReference

react/constants/Identifiers.ts

@@ -0,0 +1,4 @@
+export const PRODUCT_ID = 'ProductId'
+export const PRODUCT_SKU_ITEM_ID = 'ProductSkuItemId'
+export const PRODUCT_REFERENCE_ID = 'ProductReferenceId'
+export const PRODUCT_SKU_REFERENCE_ID = 'ProductSkuReferenceId'

store/interfaces.json

@@ -39,6 +39,9 @@
       }
     }
   },
+  "product-reference": {
+    "component": "ProductReference"
+  },
   "product-brand": {
     "component": "ProductBrand",
     "preview": {